Question

我正在学习React，并且试图用React创建一个程序，该程序将从两个输入字段中获取文本并进行绑定。我得到了输入字段，但是onClick函数不起作用。如果有人可以指出我在做什么错，我将不胜感激。

 <div id='root'></div>
<script type="text/babel">
  class CombineText extends React.Component {
    constructor(props) {
      super(props);
      this.state = {pretext: '', posttext:'', wholetext: '' };
    }

    combineText = () => {
      this.setState({
        wholetext: this.state.pretext + this.state.posttext
      });
    }
    textChanged = (event) => {
      this.setState({[event.target.name]: event.target.value});
    }

    render() {
      return (
        <div>
          <p>{this.state.wholetext}</p>
          <input type="text" id="pretext" onChange={this.textChanged} /> 
          <input type="text" id="posttext" onChange={this.textChanged} /> 
          <button onClick={this.combineText}>Press me</button>
        </div>
      );
    }
  }
  ReactDOM.render(<CombineText />, document.getElementById('root'));
</script>

Answer 1

您需要进行两项更改，

第一：由于未在输入中定义name属性，因此请在设置输入更改状态时使用event.target.id

第二：将button type指定为button，因为默认情况下，提交按钮上的submit和onClick会刷新页面。否则，您可以在CombineText方法中编写event.preventDefault()，以防止默认的提交操作行为

  class CombineText extends React.Component {
    constructor(props) {
      super(props);
      this.state = {pretext: '', posttext:'', wholetext: '' };
    }

    combineText = () => {
      this.setState({
        wholetext: this.state.pretext + this.state.posttext
      });
    }
    textChanged = (event) => {
      this.setState({[event.target.id]: event.target.value});
    }

    render() {
      return (
        <div>
          <p>{this.state.wholetext}</p>
          <input type="text" id="pretext" onChange={this.textChanged} /> 
          <input type="text" id="posttext" onChange={this.textChanged} /> 
          <button type="button" onClick={this.combineText}>Press me</button>
        </div>
      );
    }
  }
  ReactDOM.render(<CombineText />, document.getElementById('root'));

<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='root'></div>

用React绑定两个输入文本

1 个答案: