React - 在下拉列表中将状态从子级传递给父级 select

Question

我正在做一个基本的下拉菜单 select 或者。当我意识到我正在设置父级和子级的状态时，我几乎让它工作了，所以我再次重构以尝试简化这一切并将大部分责任放在一个地方。

我的逻辑在 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;

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

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 组件。如何将子项中的 selected 值返回给其父项？

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

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

并将其添加到 select... 但同样不确定如何将此值传递给父项。

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

Answer 1

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

尝试定义一个 onChange={this.onChange} 并将其传递给您的主组件，这样您的主组件就变成了：

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)}，您可以 return 主要组件的值并在您的状态中使用它。

React - 在下拉列表中将状态从子级传递给父级 select

React - Passing state from child to parent in drop down select

javascript

reactjs

state

react-props