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

小编典典

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

reactjs

我有以下输入字段，我需要获取输入的输入并将其传递给下面显示的按钮的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的方法，该方法需要两个字符串参数。代替这些字符串，我需要传递在输入字段中输入的值。如何在不将值存储在状态中的情况下实现此目标？我不想将输入字段值存储在状态变量中。任何帮助将非常感激。

阅读 261

2020-07-22

共1个答案

小编典典

如何在不将值存储在状态中的情况下实现此目标？

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

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>

2020-07-22