Javascript 如何改变孩子的道具？

我是新来的。这可能是一个很难回答的问题

我想在用户单击复选框时更改MeteorGriddle组件的“filteredFields”属性。我的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>
    );
};

constbookingspage=（）=>{
让filteredFields=['userName']；
常量handleClick=（e）=>{
如果（例如，选中目标）{
filteredFields=['userEmail']；
//如何将此更改传播到MeteorGriddle？
}
}
返回(
电子邮件
);
};

我认为有两种方法可以解决您的问题

第一个简单的方法：

将BookingPage组件转换为状态完整组件，而不是功能性组件， 然后您就可以在它内部创建状态，然后在事件上更改状态，并将其传递给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>
    );
  }
};

class bookingsPage扩展React.Component{
getInitialState=（）=>{
过滤器字段：[]
}
handleClick=（e）=>{
如果（例如，选中目标）{
常量newFilteredFields=
[…this.state.filteredFields].push（'userEmail'）；
this.setState（{filteredFields:newFilteredFields}）；
}
}
render（）{
返回(
电子邮件
);
}
};

第二种也是更难的方法：

看一看。它解决了React中的数据流问题。 基本概念是，当您选中复选框时，您向reducer（也称为react组件的全局数据存储）发送一个操作，然后GriddleComponent接收应用程序的新状态，其中包含新数据，该数据告诉他复选框已选中

---

假设您希望我为您编写一个基于您的示例。

正如@Maxx所说，您应该使用状态为的组件。然后，当您调用setState方法时，它将再次渲染，更新子对象的道具

在您的情况下，这应该有效（也使用ES6表示法）：

从“React”导入React；
从“…任何路径…”导入MeteorGriddle；
类bookingsPage扩展了React.Component{
状态={
filteredFields:['userName']
};
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
如果（例如，选中目标）{
这是我的国家({
…this.state，//这只是一种不覆盖其他属性的良好做法
filteredFields:['userEmail']
});
}
}
render（）{
const{filteredFields}=this.state；
返回(
电子邮件
);
}
}

实现这一点的方法有很多，您可以按照下面的代码进行尝试

import React from 'react';

class bookingsPage extends React.Component {

  state = {
    filteredFields: ['userName']
  };

constructor(props) {
 super(props);
}

handleChange(e) {
if (e.target.checked) {
  this.setState({
    filteredFields: ['userEmail']
  });
 }
}
render() {

return(
  <div>
      <label>
        <input type="checkbox" defaultChecked="true" value="userEmail" 
            onChange={this.handleChange.bind(this)}/>Email
      </label>
      <MeteorGriddle filteredFields={this.state.filteredFields}/>
  </div>
  );
}}

从“React”导入React；
类bookingsPage扩展了React.Component{
状态={
filteredFields:['userName']
};
建造师（道具）{
超级（道具）；
}
手变（e）{
如果（例如，选中目标）{
这是我的国家({
filteredFields:['userEmail']
});
}
}
render（）{
返回(
电子邮件
);
}}

您不能更改

道具

，而是使用

状态

在您的情况下，您不能使用无状态组件。创建带有状态的常规组件，在处理程序中使用

this.setState

，将其作为参数传递给

MeteoGriddle

Redux听起来很有趣。你能举个例子吗？

import React from 'react';

class bookingsPage extends React.Component {

  state = {
    filteredFields: ['userName']
  };

constructor(props) {
 super(props);
}

handleChange(e) {
if (e.target.checked) {
  this.setState({
    filteredFields: ['userEmail']
  });
 }
}
render() {

return(
  <div>
      <label>
        <input type="checkbox" defaultChecked="true" value="userEmail" 
            onChange={this.handleChange.bind(this)}/>Email
      </label>
      <MeteorGriddle filteredFields={this.state.filteredFields}/>
  </div>
  );
}}