功能性setState无法访问event.target.value

时间:2018-07-27 13:27:03

标签: javascript reactjs

我没有将对象传递给setState的问题。但是,这是我在测试通过函数时看到的:

class App extends React.Component {
  // ...

  update_input_field = input_event => {
    console.log("input_event.target", input_event.target);

    const update_state = (state_snapshot, props) => {
      return {
        input1: input_event.target.value
      };
    };

    this.setState(update_state);
  };

  render() {
    return (
      <form action="">
        <input
          type="text"
          value={this.state.input1}
          onChange={e => this.update_input_field(e)}
        />
      </form>
    );
  }
}  

将匿名函数传递给setState会产生与上面的代码相同的错误:

TypeError: Cannot read property 'value' of null
App.update_state
src/App.js:45
  42 | 
  43 | const update_state = (state_snapshot, props) => {
  44 |     return {
> 45 |         input1: input_event.target.value
  46 |     }
  47 | };
  48 | 

有人可以告诉我为什么代码在当前代码示例中无法访问状态变量(input1.target)吗?

我能够在update_state中记录目标值,但是无论如何都会出错。因此,我认为问题出在该函数的返回内部。

0 个答案:

没有答案