代码之家 › 专栏 › 技术社区 › jgoraya

无法读取未定义的“OnOverViewChange”的属性

reactjs javascript

jgoraya · 技术社区 · 7 年前

我有一个简单的应用程序,其中我有一个应用程序组件(父组件)和一个编辑组件(子组件)。我要做的是在编辑组件中的字段更改时更新状态。但是,当我进行此更改时,我得到的错误是无法读取未定义的“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> ...

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

3 回复 | 直到 7 年前

Harikrishnan 7 年前

好像你在做什么 onChange 在的回调方法中也不是正确的方法 map 可以作为箭头函数写入。请尝试使用以下方法

export default class OverviewEditPane extends React.Component {  

constructor(props) {
  super(props);
  autoBind(this);
  this.onOverviewChange = this.onOverviewChange.bind(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((P) =>{return <TextInput size='small'  key={P.id} id={P.id} value={P.FName} onChange={this.onOverviewChange} />;})}</td>
                </tr>
                <tr>
                  <td>{this.props.overview.map((P) =>{return <TextInput size='small' key={P.id} id={P.id} value={P.LName} onChange={this.onOverviewChange} />;})}</td>
                </tr>
              </tbody>
            </table>
 )
            }
 }

Tholle 7 年前

您正在为您的 map . 也可以绑定它,或者使用箭头函数。

() => 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 });
}

UtkarshPramodGupta 7 年前

我不确定是什么导致了这个错误,但是下面的代码修正可以减轻它:

变化 onChange={() => this.onOverviewChange.bind(this)} 到 onChange={this.onOverviewChange}
变化 state[field] = value; this.setState({state}); 到 this.setState({[field]: value})