React - 在下拉选择中将状态从子级传递给父级

Posted 2023-02-22

【中文标题】React - 在下拉选择中将状态从子级传递给父级

【英文标题】：React - Passing state from child to parent in drop down select

【发布时间】：2018-09-25 13:34:31

【问题描述】：

我正在制作一个基本的下拉选择器。当我意识到我正在为父母和孩子设置状态时，我几乎让它工作了，所以我再次重构以尝试简化这一切并将大部分责任放在一个地方。

我的逻辑在 MyDropDown 组件中，然后我有一个 Header 组件，然后是 Main 组件，它应该全部呈现。

import React from 'react';

class MyDropdown extends React.Component 
  render() 
    let initialUsers = this.props.state.users;
  
    let alphabetizeUsers = initialUsers
      .sort((a, b) => 
        return a.name > b.name;
      )
      .map(obj => 
        return (
          <option key=obj.id value=obj.name>
            obj.name
          </option>
        );
      );

    return <select>alphabetizeUsers</select>;
  


export default MyDropdown;

然后我有我的主要组件，我在其中进行 api 调用并将状态传递到下拉组件。

import React from 'react';
import MyDropdown from './MyDropdown';

class UserHeader extends React.Component 
  state = 
    users: []
  ;

  componentDidMount() 
    let initialUsers = [];
    fetch('http://localhost:3000/users')
      .then(response => 
        return response.json();
      )
      .then(data => 
        this.setState( users: data );
      );
  

  render() 
    return <MyDropdown state=this.state />;
  


export default UserHeader;

最后是我的主组件，我想在其中显示所选下拉菜单中的值

import React,  Component  from 'react';
import './Main.css';
import MyDropdown from './components/MyDropdown';
import UserHeader from './components/UserHeader';

class Main extends Component 
  render() 
    return (
      <div className="App">
        <header className="App-header">
          <span className="App-title">SELECT A USER:</span>
          &nbsp; <UserHeader />
        </header>
        <p className="App-intro">
          I should get the dropdown value here: this.state.user
        </p>
      </div>
    );
  


export default Main;

我尝试做的是移动语句

          I should get the dropdown value here: this.state.policies .

进入 UserHeader 组件。如何将子项中选择的值备份给其父项？

我尝试过的另一件事是向子组件添加处理程序

onChange = e => 
  this.setState( selectedUser: e.target.value );
;

并将其添加到选择中...但再次不确定如何将此值传递给父级。

return <select onChange=this.onChange>alphabetizeUsers</select>;

【参考方案1】：

将值传回父组件的最简单方法是通过回调。

尝试定义 onChange=this.onChange 并将其传递给您的 Main 组件，就像这样您的 Main 组件变为：

import React,  Component  from 'react';
import './Main.css';
import MyDropdown from './components/MyDropdown';
import UserHeader from './components/UserHeader';

class Main extends Component 
  this.state = 
    user: null,
  

  constructor(props) 
    super(props);
    this.onChangeUser = this.onChangeUser.bind(this);
  

  onChangeUser(newUser) 
    this.setState( user: newUser );
  

  render() 
    return (
      <div className="App">
        <header className="App-header">
          <span className="App-title">SELECT A USER:</span>
          &nbsp; <UserHeader onChangeUser=this.onChangeUser />
        </header>
        <p className="App-intro">
          I should get the dropdown value here: this.state.user
        </p>
      </div>
    );
  


export default Main;

现在您正在传递一个回调，您可以对您的 UserHeader 组件执行相同的操作。

import React from 'react';
import MyDropdown from './MyDropdown';

class UserHeader extends React.Component 
  state = 
    users: []
  ;

  componentDidMount() 
    let initialUsers = [];
    fetch('http://localhost:3000/users')
      .then(response => 
        return response.json();
      )
      .then(data => 
        this.setState( users: data );
      );
  

  render() 
    return <MyDropdown state=this.state onChange=this.props.onChangeUser />;
  


export default UserHeader;

最后，您现在可以将此回调附加到您的 <select> 元素。

import React from 'react';

class MyDropdown extends React.Component 
  render() 
    let initialUsers = this.props.state.users;
  
    let alphabetizeUsers = initialUsers
      .sort((a, b) => 
        return a.name > b.name;
      )
      .map(obj => 
        return (
          <option key=obj.id value=obj.name>
            obj.name
          </option>
        );
      );

    return <select onChange=(ev) => this.props.onChange(ev.target.value)>alphabetizeUsers</select>;
  


export default MyDropdown;

通过像这样在select 元素上定义 onChange，onChange=(ev) => this.props.onChange(ev.target.value)，您可以将值返回给主组件并在您的状态中使用它。

【讨论】：

这行得通。只需将“我应该在此处获取下拉值：this.state.user”更改为 this.state.selectedUser。还有一件事......你知道如何设置默认值吗？当我从下拉列表中单击某些内容时它正在工作，但在最初加载时却没有。

谢谢，我已经进行了编辑。您想将defaultValue 传递给您的<select>，以便<select sefaultValue=this.props.user>。你应该从你的主要组件中传递这个，或者你可以从MyDropdown 组件传递一个默认值。

我似乎无法让它工作......所以在 MyDropdown 我有 然后在 UserHeader 然后在 Main 中相同，但这不可能是正确的......

请记住defaultValue是像<select>这样的html元素的特殊属性，当你在PolicyHeader上添加像<select defaultValue=this.props.policy>这样的默认值时，你必须正确传递命名为 prop down 以及 <PolicyDropdown policy=this.props.policy> 等等。如果您的“策略”处于顶部状态，请通过具有正确名称的道具继续将其传递给组件。

知道了。到目前为止，我在 Parent: 然后在中间组件 UserHeader );最后在下拉组件中 defaultValue=this.props.user