javascript - 在 React 中如何将 onClick 函数传递给孙组件？

Question

我刚刚开始使用 React，根据我的案例改编井字游戏教程。 我试图单击孙组件来更改祖 parent 组件的状态。代码如下:

class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      fields: [
        {
          id: 1,
          show: false
        },
        {
          id: 2,
          show: false
        }
      ]
    }
  }

  handleClick(i) {
    const fields = this.state.fields.slice();
    fields[i].show = true;
    this.setState({fields: fields});
  }
  
  render() {return <Preview />}
      
}

const Preview = (props) => {
  
  return (
    <div className="preview">
      {props.fields.map((field) => (
        <Field data={field} key={field.id} onClick={ props.onClick(field.id) }/>
      ))}
    </div>
  );
};

const Field = props => {
  
  return (
    <div className="field" onClick={ props.onClick } />
  );
};

我收到 TypeError: Cannot read property 'state' of undefined from this line:

handleClick(i) {
const fields = this.state.fields.slice();

Answer 1

问题

App 类的
1. this 未绑定(bind)到 handleClick 函数。这是 TypeError: Cannot read property 'state' of undefined 错误的原因。
2. 您正在改变您的状态对象。对数组进行切片会创建一个新的数组引用，但 fields[i].show = true; 会改变状态中的对象引用。
3. 您不会将 fields 或 onClick 属性传递给 Preview。
4. 在 Preview 中未正确调用 onClick 回调。

解决方案

1. 将 this 绑定(bind)到处理程序或转换为箭头函数，以便自动绑定(bind)。

   constructor(props){
     ...
     this.handleClick = this.handleClick.bind(this);
   }
   

   或

   handleClick = (i) => { ..... };
   

2. 不要改变状态。浅复制状态然后更新属性。

   handleClick = (id) => {
     this.setState(prevState => ({
       fields: prevState.fields.map((field) => {
         return field.id === id ? {
           ...field,
           show: true,
         } : field;
       }),
     }));
   };
   

3. 将 fields 和 handleClick 作为 onClick 传递给 Preview。

   render() {
     return (
       <Preview
         fields={this.state.fields}
         onClick={this.handleClick}
       />
     );
   }
   

4. 使用 ID 正确调用 props.onClick。

   {props.fields.map((field) => (
     <Field
       data={field}
       key={field.id}
       onClick={() => props.onClick(field.id)}
     />
   ))}