将react文本字段输入值作为参数传递给方法

Passing react text field input values as parameters to a method

本文关键字：参数传递 方法 react 文本 字段 输入      更新时间：2023-09-26

我有下面的输入字段，我需要获取输入的输入并将其传递给下面所示按钮的onClick事件。

<input type="text" style={textFieldStyle} name="topicBox" placeholder="Enter topic here..."/>
<input type="text" style = {textFieldStyle} name="payloadBox" placeholder="Enter payload here..."/>
<button value="Send" style={ buttonStyle } onClick={this.publish.bind(this,<value of input field 1>,<value of input field2>)}>Publish</button><span/>

我有一个名为publish的方法，它接受两个字符串参数。在这些字符串的位置，我需要传递输入字段中输入的值。如何在不将值存储在状态中的情况下实现这一点?我不想将输入字段值存储在状态变量中。

我如何在不存储状态值的情况下实现这一点?

我认为在这种情况下最好使用状态

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      topicBox: null,
      payloadBox: null
    };
    
    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange({ target }) {
    this.setState({
      [target.name]: target.value
    });
  }
  publish() {
    console.log( this.state.topicBox, this.state.payloadBox );
  }
  
  render() {
    return <div>
      <input 
        type="text" 
        name="topicBox" 
        placeholder="Enter topic here..." 
        value={ this.state.topicBox }
        onChange={ this.handleChange } 
      />
      
      <input 
        type="text" 
        name="payloadBox" 
        placeholder="Enter payload here..."
        value={ this.state.payloadBox } 
        onChange={ this.handleChange } 
      />
      
      <button value="Send" onClick={ this.publish }>Publish</button>
    </div>
  }
}
ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

您可以为每个文本字段添加ref，并从中读取值，如:

class App extends React.Component {
  constructor() {
    super();
    this.publish = this.publish.bind(this);
  }
  publish(topicBox, payloadBox) {
    alert(this.refs.topic.value);
    alert(this.refs.payload.value);
  }
  render() {
    return <div>
      <input 
        ref="topic"
        type="text"
        name="topicBox"
        placeholder="Enter topic here..."/>
      <input 
        ref="payload"
        type="text"
        name="payloadBox"
        placeholder="Enter payload here..."/>
      <button 
        value="Send"
        onClick={this.publish}> 
        Publish
      </button>
    </div>
  }
}
ReactDOM.render(<App />, document.getElementById('container'));

工作小提琴https://jsfiddle.net/hjx3ug8a/15/

感谢Alexander T的添加!

相关文章：