首页 > 解决方案 > 功能 setState 失去对 event.target.value 的访问权限

问题描述

将对象传递给 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 中记录目标值,但无论如何都会出错。因此,我认为问题在于该函数的返回。

标签: javascriptreactjs

解决方案


推荐阅读