使用react.js從嵌套子級獲取表單值

Question

如何將孩子的狀態傳回容器？ 我有一個非常簡單的應用程序，但因為我將它們拆分為更小的組件，現在我將狀態值（Form）傳遞回其容器。 我也可以在子組件中調用api，然后通過props容器接收它，但這不是干凈的，我希望將'final event'放在容器中，並且容器具有'main'狀態。

我的第一個意圖（確保'主'狀態存儲在容器中）是否正確？ 如果是，如何將狀態從子組件傳回給容器？ 假設我沒有使用redux。

https://codesandbox.io/s/8zrjjz3yjj

Answer 1

將方法作為道具傳遞：

家長：

class Parent extends Component {
    ....

    render = () => <Child onChange={childDidSomething}/>

    childDidSomething = state => {
        ...
    }
}

兒童：

class Child extends Component {
    ....

    render() {...}

    somethingChanged() {
        this.props.onChange(this.state);
    }
}

Answer 2

你應該提升狀態 。

讓父組件處理與其子項有關的狀態，並將處理程序傳遞給子項，以便子項可以調用它們並將它們傳遞回相關值。

以下是使用您的代碼運行此方法的示例：

 class AddUser extends React.Component { onChange = ({ target }) => { const { onChange } = this.props; onChange(target.value); } render() { return ( <div> <input onChange={this.onChange} type='text' placeholder='user' /> </div> ) } } class Modal extends React.Component { state = { newUser: '' } onUserChange = newUser => this.setState({ newUser }); addUser = () => { const { addUser } = this.props; const { newUser } = this.state; addUser(newUser); this.setState({ newUser: '' }); // reset the field } render() { return ( <div> <AddUser onChange={this.onUserChange} /> <button onClick={this.addUser}>add</button> </div> ) } } class MainContainer extends React.Component { state = { showAddUser: false, users: [{ name: 'Jane' }, { name: 'Black' }] } addUserIntoUsers = (userName) => { const { users } = this.state; if (userName) { // only if we have a value const nextUsers = [...users, { name: userName }]; this.setState({ users: nextUsers, showAddUser: false }); } } render() { return ( <div> <button onClick={() => this.setState({ showAddUser: !this.state.showAddUser })}> Toggle User Panel </button> <br /> {this.state.users.map(o => { return (<div>{o.name}<br /></div>) })} {this.state.showAddUser && <Modal addUser={this.addUserIntoUsers} />} </div> ) } } ReactDOM.render(<MainContainer />, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>