Question

寻找一种从父组件中的方法切换子组件中的布尔状态值的方法。

父级包含一种将联系表单打开到视图中的方法。

  handleContact() {
    this.setState({
      contactOpen: !this.state.contactOpen,
    });
  }

ContactForm子组件的状态为thankYou（布尔值），该状态在表单提交时设置为true。

问题是当表单提交后调用了用于打开联系人表单的Parent方法时，“谢谢”消息仍停留在屏幕上。

我尝试将thankYou状态移动到Parent，并在Parent中创建一个showThankYou方法，并将其传递给ContactForm子级。该功能似乎无法运行，并且这种方式似乎过于复杂。

还有另一种方法可以通过父级的handleContact方法来更新子级组件中的布尔状态吗？

Answer 1

我建议您为表单提供一个childComponent，并为您的感谢消息提供一个childComponent /（仅一个jsx），并在父组件中进行呈现，如下所示：

expected: Ready!
actual: 
(node:800) UnhandledPromiseRejectionWarning: Error: Incorrect login details were provided.
    at WebSocketConnection.client.ws.connection.once.event (C:\Users\mort3\Desktop\Sakabato\node_modules\discord.js\src\client\ClientManager.js:48:41)
    at Object.onceWrapper (events.js:276:13)
    at WebSocketConnection.emit (events.js:188:13)
    at WebSocketConnection.onClose (C:\Users\mort3\Desktop\Sakabato\node_modules\discord.js\src\client\websocket\WebSocketConnection.js:390:10)
    at WebSocket.onClose (C:\Users\mort3\Desktop\Sakabato\node_modules\ws\lib\event-target.js:124:16)
    at WebSocket.emit (events.js:188:13)
    at _receiver.cleanup (C:\Users\mort3\Desktop\Sakabato\node_modules\ws\lib\websocket.js:220:12)
    at Receiver.cleanup (C:\Users\mort3\Desktop\Sakabato\node_modules\ws\lib\receiver.js:535:15)
    at WebSocket.finalize (C:\Users\mort3\Desktop\Sakabato\node_modules\ws\lib\websocket.js:206:20)
    at TLSSocket.emit (events.js:193:15)
(node:800) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:800) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

如果您想处理contactForm组件中的所有内容，则应该将回调从父级传递给子级（contactForm），并更改是否显示消息的状态，并将其作为另一个道具传递给contactForm：

// Parent
constructor(props) {
    super(props);

    this.state = {
        contactOpen: true,
        showThankU: false
    }
}

onSubmit(params) {
   // Do the submission process

   this.setState({showThankU: true, contactOpen: false}, () => {
       // in the callback use setTimout
       // to hide thank you box after desired seconds

       setTimeout(() => this.setState({showThankU: false), 10000);
   });
}

render() {
    return (
        <div>
            {/* if you would like to hide it after submit use this.state.contactOpen && */}
            {this.state.contactOpen && 
              <ContactsForm onSubmit={this.onSubmit.bind(this)}/>
            }

            {/* Whatever your thank you message (childComponet or just jsx) is: */}
            {this.state.showThankU && <ThankYouMessage {...props} />
        </div>
    );
}

还要记住，当您要将回调传递给child时，应注意使用JavaScript this：

为此，您可以像这样绑定您的方法：

<ContactsForm 
    showMessage={this.state.showMessage}
    onSubmit={() => {
         this.setState({showMessage: true});
    }}
    {/* Other props */}
/>

Answer 2

    handleContact() {
    const contact = !this.state.contactOpen;
    this.setState({
      contactOpen: contact
    });
  }

通过Nicholas（https://stackoverflow.com/users/2836350/nicholas）修复（我想我已经尝试过这种方法了，但对我没有用，这就是为什么我使用上面的方法）

handleContact=()=> this.setState(prevState=>({contactOpen: !prevState.contactOpen}))

在父组件之间切换布尔状态

2 个答案: