Question

开始学习反应。我已经在这个问题上坐了一个小时，而且我不知道为什么这不起作用。环顾四周，但没有任何结果。我是哑巴还是什么？

我无法在输入字段中书写，或者当我可以写（如果我解决了）时，我的状态不会改变。也许有人知道为什么这是个问题？

import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "test"
    }
  }

  textChangedHandler = (event) => {
    this.setState = ({
      text: event.target.value
    });
  } 

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
        <input 
          type="text"
          onChange={this.textChangedHandler}
          value={this.state.text}> 
        </input>
      </div>
    );
  }
}

export default App;

Answer 1

textChangedHandler = (event) => {
    this.setState({
        text: event.target.value
    });
}

render() {
    return (
        <div className="App">
            <p>{this.state.text}</p>
            <input
                type="text"
                onChange={this.textChangedHandler}
                value={this.state.text}>
            </input>
        </div>
    );
}

尝试一下。

Answer 2

查看您的textChangedHandler

textChangedHandler = (event) => {
    this.setState = ({
      text: event.target.value
    });
  }

在此，您需要像这样设置状态。

this.setState({
  text: event.target.value
})

this.setState是一种方法。您应该重新分配它。

Answer 3

尝试这个：

import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "test"
    }
    // This binding is necessary to make `this` work in the callback
    this.textChangedHandler = this.textChangedHandler.bind(this)
  }

  textChangedHandler = (event) => {
    this.setState({
      text: event.target.value
    });
  } 

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
        <input 
          type="text"
          onChange={this.textChangedHandler}
          value={this.state.text}> 
        </input>
      </div>
    );
  }
}

export default App;

更多信息：https://reactjs.org/docs/handling-events.html

反应输入和状态不能覆盖

3 个答案: