如何更新父母的狀態？

Question

我是新來的反應，並試圖更新父母的狀態，但沒有運氣到目前爲止。

組件

class InputBox extends Component { 
    constructor(props) { 
    super(props); 
    this.type = props.type; 
    } 
    render() { 
    return (
     <div> 
     <input type={this.type}/> 
     </div> 
    ); 
    } 
} 

其他容器，我想利用這個組件來切換密碼

constructor(props) { 
    super(props); 
    this.state = { 
    type: 'password', 
    wording: 'Show', 
    }; 
    this.changeState = this.changeState.bind(this); 
} 

changeState() { 
    const oldState = this.state.type; 
    const isTextOrHide = (oldState === 'password'); 
    const newState = (isTextOrHide) ? 'text' : 'password'; 
    const newWord = (isTextOrHide) ? 'Hide' : 'Show'; 
    this.setState({ 
    type: newState, 
    label: newWord, 
    }); 
} 

<Wrapper> 
    <InputBox type={this.state.type} /> 
    <Toggle onClick={this.changeState}>{this.state.wording}</Toggle> 
</Wrapper> 

Answer 1

你可以這樣做：

首先，家長組件：

import React, { Component } from 'react'; 
import { InputBox} from './InputBox' 

class componentName extends Component { 
    state = { 
    password: '', 
    type: 'password', 
    wording: 'Show', 
    } 

    handleShow = (word) => { 
    this.setState({ wording: word }) 
    } 

    handleChange = (e) => { 
    if(!this.state.password){ 
     handleShow('Show') 
    } else { 
     handleShow('Hide') 
    } 
    this.setState({ password: e.target.value }) 
    } 

    render() { 
    return (
     <div> 
     <Wrapper> 
      <InputBox 
      name='password' 
      handleChange={this.handleChange} 
      password={this.state.password} 
      type={this.state.type} /> . 
      <Toggle onClick={this.changeState}>{this.state.wording} 
     </Toggle> 
     </Wrapper> 
     </div> 
    ); 
    } 
} 

現在孩子組件：

import React from 'react'; 

export const InputBox = (props) => (
    <input onChange={props.handleChange} value={props.password} type={props.type}/> 
) 

1. 的state需要永遠留在父母然後將其傳遞給props
2. 孩子部件通常是無狀態的，這意味着，他們並不需要是一個class（可以只是返回jsx功能）以及最進口，不能有state（狀態只在Class components可用）

總是向下通過國家兒童組件 因爲不管多遠下來state，通過正在通過props通過它會永遠改變源，在這種情況下是父，創造者的狀態

另一件重要的事情：

如果您使用箭頭函數ES6，則不需要有constructor來綁定您的函數。

像這樣：handleSomething =() => { return ... }

另一件事：

你不需要constructor設置state，你可以簡單地做

state = { } 

，並自動成爲環境的一部分this

用這種方式思考你永遠不會失敗。

希望它可以幫助你:)

Answer 2

class Child extends Component{ 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let { parentStateChange } = this.props; 
     return <input type='text' onChange={parentStateChange}/> 
    } 
} 

class Parent extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      content: "Something" 
     } 
     this.parentStateChange = this.parentStateChange.bind(this); 
    } 

    parentStateChange(event){ 
     let value = event.target.value; 
     this.setState({ 
      content: value 
     }) 
    } 

    render(){ 
     let { content } = this.state; 
     return <div> 
      <h2>{content}</h2> 
      <Child parentStateChange={this.parentStateChange}></Child> 
     </div> 
    } 
} 

我做到了通過讓家長方法對兒童的道具。然後Child使用這個方法來改變Parent的狀態。它被稱爲回調函數。

For More References

我認爲這是對您有用。

Answer 3

一個更通用的（但可能是不錯的辦法）。父類有一個函數作爲回調函數傳遞給子代，並允許子代直接調用setState。我只能看到它在一個有幾個孩子的緊密綁定的小組件中有用，或者只是用於驗證概念代碼。

/** 
    * This allows children to set state of this object. 
    * Might be a very bad approach, btw. 
    * 
    * @param {object} newState - object to update state. 
    * @param {func} cb - call back after state is updated. 
    */ 
doSetState = (newState, cb=null) => { 
    const merge = { ...this.state, ...newState }; 
    cb ? this.setState(merge, cb) : this.setState(merge); 
}