Question

我将onChange函数传递给表示形式的组件，但由于某种原因，onChange没有更新对象。当我在onChange中设置后记录状态时，我只得到第一个按下任何字符时改变的字符。

＆＃13;

  changeUser(event) {

    const field = event.target.name;
    const user = this.state.user;
    user[field] = event.target.value;

    this.setState({
      user
    }, () => {
      console.log(this.state.user);
    });
  }

  /**
   * Render the component.
   */
  render() {
    return (
      <LoginForm
        onSubmit={this.processForm}
        onChange={this.changeUser}
        errors={this.state.errors}
        successMessage={this.state.successMessage}
        user={this.state.user}
      />
    );
  }

＆＃13;

Answer 1

您需要做的是使用value={this.state.value}为输入分配值。这是一个例子：

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please enter your username.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    // here's where you can pass the full value somewhere
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A user was logged in: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 2

问题是期望使用从PureComponent扩展的组件重新呈现状态更改。状态的比较方式与常规Component不同，因此不会调用render。 forceUpdate（）可以帮助你。

https://reactjs.org/docs/react-api.html#reactpurecomponent

onChange函数在收到事件

2 个答案: