javascript - 如何更换 child 的 Prop ？

Question

我是 React 的新手。这可能是一个菜鸟问题。

我想在用户单击复选框时更改我的 MeteorGriddle 组件的“filteredFields” Prop 。我的 JSX:

const bookingsPage = () => {
    let filteredFields = ['userName'];
    const handleClick = (e) => {
        if (e.target.checked) {
            filteredFields = ['userEmail'];

            // How to propagate this change to the MeteorGriddle?
        }
    }

    return (
        <div>
            <label><input type="checkbox" defaultChecked="true" value="userEmail" onClick={handleClick}/>Email</label>

            <MeteorGriddle filteredFields={filteredFields}/>
        </div>
    );
};

Answer 1

我看到有两种方法可以解决您的问题。

第一个也是最简单的方法:

将您的 bookingsPage 组件变成有状态组件而不是功能组件， 然后您就可以在其中创建状态，然后更改事件状态并将其传递给 MeteorGriddle 组件。

所以代码是:

class bookingsPage extends React.Component {
    getInitialState = () => {
      filteredFields: []
    }

    handleClick = (e) => {
        if (e.target.checked) {
            const newFilteredFields = 
              [ ...this.state.filteredFields ].push('userEmail');
            this.setState({ filteredFields: newFilteredFields });
        }
    }

    render() {
    return (
        <div>
            <label>
              <input
                type="checkbox" 
                defaultChecked="true" 
                value="userEmail" 
                onClick={this.handleClick}
              />
              Email
            </label>

            <MeteorGriddle 
              filteredFields={this.state.filteredFields}
            />
        </div>
    );
  }
};

第二种更难的方法:

看看Redux .它解决了 React 中的数据流问题。 基本概念是，当您选中复选框时，您将一个 Action 发送到 reducer(也就是 react 组件的全局数据存储)，然后 GriddleComponent 收到应用程序的新状态，其中包含新数据，告诉他复选框已选中。

如果你想让我根据你的例子为你写一个例子。