Question

我有一个提交按钮的表单。该表单调用onclick函数，将某些事件的状态设置为false为true。然后我想将此状态传递回父级，以便如果它为true则呈现componentA但如果为false则呈现componentB。

我怎么做才能做出反应？我知道我需要使用状态或道具，但不知道该怎么做。这也是单向流反应原理的矛盾吗？

ComponentA代码：

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

控制其显示内容的父组件：

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )

Answer 1

将handleClick移至父级并将其作为道具传递给子组件。

<LoginPage handleClick={this.handleClick.bind(this)}/>

现在在子组件中：

<form onSubmit={this.props.handleClick}>

这样提交表单将直接更新父组件中的状态。这假设您不需要访问子组件中的更新状态值。如果这样做，那么您可以将状态值从父级传递回子级作为prop。保持单向数据流。

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>

Answer 2

这是一个示例，说明了如何将数据从子级传递到父级（我遇到了同样的问题，并使用了该方法）

在父级上，我有一个函数（我将从有一些数据的孩子那里调用它）

handleEdit(event, id){ //Fuction
    event.preventDefault();  
    this.setState({ displayModal: true , responseMessage:'', resId:id, mode:'edit'});  
 } 

dishData = <DishListHtml list={products} onDelete={this.handleDelete} onEdit={(event, id) => this.handleEdit(event, id)}/>;

在子组件上：

<div to="#editItemDetails" data-toggle="modal" onClick={(event)=>this.props.onEdit(event, listElement.id) }
                        className="btn btn-success">

Answer 3

在父组件中：

//precomputed 128 bit value from the Notification API's 16 bit value: 0xFFF1
//static let serviceUUID = CBUUID(string: "0000FFF1-0000-1000-8000-00805F9B34FB")

 _manager?.scanForPeripherals(withServices: [serviceUUID], options: [CBCentralManagerScanOptionAllowDuplicatesKey:true])

在子组件中：

getDatafromChild(val){
    console.log(val);
}
render(){
 return(<Child sendData={this.getDatafromChild}/>);
}

Answer 4

在React中，您可以使用道具将数据从父级传递到子级。但是您需要一种不同的机制来将数据从子级传递到父级。

执行此操作的另一种方法是创建一个回调方法。您将在创建子级时将回调方法传递给子级。

class Parent extends React.Component {
myCallback = (dataFromChild) => {
    //use dataFromChild
},
render() {
    return (
        <div>
             <ComponentA callbackFromParent={this.myCallback}/>
        </div>
    );
  }
}

您可以通过父级传递的回调方法，将子项中的DecisionPage值传递给父级。

     class ComponentA extends React.Component{
          someFn = () => {
            this.props.callbackFromParent(decisionPage);
          },
          render() {
            [...]
          }
     };

SomeFn可能是您的handleClick方法。

Answer 5

将状态作为道具传递

我最近学到了一种非常适合从 <Parent /> 组件更改 <Child /> 组件中的状态的方法。

这可能不是这个问题的确切答案，但它肯定适用于这种情况和其他类似情况。

它是这样工作的：

在 STATE 组件中设置默认 <Parent /> - 然后将“setState”属性添加到 <Child />

const Parent = () => {
  const [value, setValue] = useState(" Default Value ");
   return (
    <Child setValue={setValue} />
  )
}

然后从 Child 组件更改状态（在父级中）

const Child = props => {
  return (
   <button onClick={() => props.setValue(" My NEW Value ")}>
    Click to change the state
  </button>
 )
}

当您单击按钮时，<Parent /> 组件中的状态将更改为您在 set 组件中<Child /> 的状态，利用“props< /strong>".. 这可以是你想要的任何东西。

我希望这对你和未来的其他开发者有所帮助。

Answer 6

简单步骤：

创建一个名为Parent的组件。
在“父组件”中创建一个接受一些数据和集合的方法接受的数据作为父母的状态。
创建一个名为Child的组件。
将在“父对象”中创建的方法作为props传递给子对象。
使用this.props后接方法接受父项中的道具命名并传递孩子的状态作为参数。
该方法将用孩子的状态替换父母的状态。

Answer 7

只是为了向我澄清一下，但是为什么您要事件将其称为回调函数，通常回调函数是作为另一个函数的参数接收的函数（根据定义），我不特别认为<这里使用的strong> myCallback 函数是另一个函数的参数。如果我错了，请纠正我！

Answer 8

如果父组件是功能组件，则现在可以使用use上下文方式。其中涉及将ref传递给对象，并将ref传递给stateChanging方法。这将允许您执行的操作是从父状态更改子状态，并在保持与父状态同步的同时引用状态。您可以在codedamn的youtubeVideo中了解更多有关此内容的信息，标题为“反应16.12教程20：上下文API简介”和“反应16.12教程21：useContext”

如何在React中将状态传递回父级？

8 个答案: