javascript - 无法读取未定义的 'onOverviewChange' 的属性

Question

我有一个简单的应用程序，其中有一个应用程序组件(父级)和一个编辑组件(子级)。我想做的是当编辑组件中的字段更改时更新状态。但是，当我进行此更改时，出现错误无法读取未定义的属性“onOverviewChange” 在 onChange (bundle.js:57164)。

export default class OverviewEditPane extends React.Component {  

constructor(props) {
  super(props);
  autoBind(this);
}


onOverviewChange(event) {
  let state = this.state;
  let field = event.target.name; 
  let value = event.target.value;
  state[field] = value;
  this.setState({state});

}

render () {
  return (
          <table>
            <FormFields>
            <tbody>
                <tr>
                  <td>{this.props.overview.map(function(P){return <TextInput size='small'  key={P.id} id={P.id} value={P.FName} onChange={() => this.onOverviewChange.bind(this)}  />;})}</td>
                </tr>
                <tr>
                  <td>{this.props.overview.map(function(P){return <TextInput size='small' key={P.id} id={P.id} value={P.LName} onChange={() => this.onOverviewChange.bind(this)} />;})}</td>
                </tr> ...

有人知道我做错了什么吗？

Answer 1

您正在为您的 map 提供常规函数。要么也绑定(bind)它，要么使用箭头函数。

() => this.onOverviewChange.bind(this) 将创建一个返回函数的新函数。确保您在新函数内调用 this.onOverviewChange。

<tr>
  <td>
    {this.props.overview.map(P => {
      return (
        <TextInput
          size="small"
          key={P.id}
          id={P.id}
          value={P.FName}
          onChange={(e) => this.onOverviewChange(e)}
        />
      );
    })}
  </td>
</tr>
<tr>
  <td>
    {this.props.overview.map(P => {
      return (
        <TextInput
          size="small"
          key={P.id}
          id={P.id}
          value={P.LName}
          onChange={(e) => this.onOverviewChange(e)}
        />
      );
    })}
  </td>
</tr>

您还必须确保不会改变事件处理程序中的state。你可以这样写:

onOverviewChange(event) {
  this.setState({ [event.target.name]: event.target.value });
}