Question

我正在尝试创建一个组件，以实时显示在输入字段中键入的内容。我已经看到它使用两个组件完成，但是我不明白为什么我不能在一个组件中做同样的事情。

状态是在构造函数中设置的，我创建了一个由onChange事件触发的函数，并且应该触发一个调用this.setState的函数以将状态更改为新输入，但是它似乎不起作用。

您可以在此处查看代码：https://codepen.io/AlexMercedCoder/pen/LYPbOXE?editors=0010

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState(title2);
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

您没有正确设置状态。您需要说出您要更新的状态：

this.setState({title: title2});

Answer 2

您需要更新setState()语句以更新title组件的状态，并通过添加<input />属性使value成为controlled component，以确保用户输入时，输入中的值将更改：

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState({ title: title2 });
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input value={this.state.title} onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

希望有帮助！

Answer 3

问题来自您的setState函数您应该为对象提供您想要更改的状态属性的键

this.setState({myProperty : myValue})

您的代码必须类似于：

class App extends React.Component {
  constructor() {
    super();
    this.state = { title: "Welcome!" };
  }

  changeTitle(e) {
    var title2 = e.target.value;
    this.setState({title : title2});
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle.bind(this)} />

      </div>

    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 4

您只需要执行以下操作：

class App extends React.
  this.state = { title: "Welcome!" };

  changeTitle(e) {
    if (e && e.target && e.target.value) {
      var title2 = e.target.value;
      this.setState({ title: e.target.value });
    }
  }

  render() {
    return (
      <div>
        <h1> {this.state.title}</h1>
        <input onChange={this.changeTitle} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

您的问题是您试图使用title2作为该州的简写属性，但是该州没有title2。

组件不会更新

4 个答案: