javascript - 使用 Props 和 State 将选择框的值传递给子组件 React.JS

Question

背景

我将根据选择框中的值过滤表格。我无法理解 react.js 中的 state 和 props。一旦我传递了值，我就可以轻松地进行过滤，但我正在尝试以“ react ”方式来执行此操作。

问题

当用户选择其中一个选项时，如何传递 SelectionBox 的值或将其更改为 TableDisplay？

示例

class SelectionBox extends React.Component {
                render() {
                return <div className="filter">
              <label for="business">Filter by Status
                                <select id="business" name="business">
                                    <option value="all">All Requests</option>
                                    <option value="approved">Approved</option>
                                    <option value="pending">Pending</option>
                                    <option value="denied">Denied</option>
                                </select>
                </label>
            </div>;
        }
}

class TableDisplay extends React.Component {
        render() {
            return <div className="wrapper">
            <h1>Requests</h1>
            <SelectionBox /> 
            <div><table className="table">
                    <tr className="seperate"><td>Title</td><td>Status</td><td>Created</td><td>Updated</td><td>Delete</td></tr>
                  {Object.keys(requests).map(function(key) {  
    let styling = "bg-plain";

    if (requests[key].status == "Approved") {
        styling = "bg-success";
    } else if (requests[key].status == "Denied") {
        styling = "bg-danger";
    }

    return <tr className={styling}>
        <td>{requests[key].title}</td>
        <td>{requests[key].status}</td>
        <td>{requests[key].created_at.slice(0, 10)}</td>
        <td>{requests[key].updated_at.slice(0, 10)}</td>
        <td><a href="">Delete</a></td>
    </tr>;

    })}
                    </table>
          </div></div>;
      }
}

研究

从阅读中我认为我需要在这里实现的是， 在 SelectionBox 内

 constructor(props) {
    super(props);

    this.state = {
// Something referring to the state of the select box here
    };
  };

然后从 TableDisplay 中访问 props？

Answer 1

首先，为了澄清您对 state 与 props 的理解，您应该引用这个答案:What is the difference between state and props in React?

其次，要将 SelectionBox 的值传递给 TableDisplay，您需要创建某种包含这两个组件的父 TableDisplayContainer 组件。 TableDisplayContainer 将在其状态中存储 select 下拉列表的值。为此，您需要将一个函数作为 prop 传递给 SelectionBox，该函数将处理 select 下拉列表的 onChange 事件(您可以例如，将其称为handleOnChange)。 handleOnChange 方法会将值设置为 TableDisplayContainer 的状态。一旦设置了状态，您就可以将该值作为 prop 传递给 TableDisplay 组件。

以下是您可以执行的操作的简单示例:

class SelectionBox extends React.Component {
  render() {
    return (
      <div className="filter">
        <label for="business">Filter by Status
          <select
            id="business"
            name="business"
            onChange={this.props.handleOnChange}
          >
              <option value="all">All Requests</option>
              <option value="approved">Approved</option>
              <option value="pending">Pending</option>
              <option value="denied">Denied</option>
          </select>
        </label>
      </div>
    );
  }
}

class TableDisplay extends React.Component {
  render() {
    // Do your filtering with this value
    const {selectValue} = this.props;

    return (
      <div className="wrapper">
        <h1>Requests</h1>
        <SelectionBox /> 
        <div><table className="table">
              <tr className="seperate"><td>Title</td><td>Status</td><td>Created</td><td>Updated</td><td>Delete</td></tr>
            {Object.keys(requests).map(function(key) {  
        let styling = "bg-plain";

        if (requests[key].status == "Approved") {
        styling = "bg-success";
        } else if (requests[key].status == "Denied") {
        styling = "bg-danger";
        }

        return <tr className={styling}>
        <td>{requests[key].title}</td>
        <td>{requests[key].status}</td>
        <td>{requests[key].created_at.slice(0, 10)}</td>
        <td>{requests[key].updated_at.slice(0, 10)}</td>
        <td><a href="">Delete</a></td>
        </tr>;

        })}
              </table>
        </div>
      </div>
    );
  }
}
class TableDisplayContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      selectValue: 'all' // use this as default
    }
  }

  handleOnChange(e) {
    this.setState({
      selectValue: e.target.value
    });
  }

  render() {
    const {selectValue} = this.state;

    return (
      <div>
        <SelectionBox
          handleOnChange={this.handleOnChange.bind(this)}
        />
        <TableDisplay
          selectValue={selectValue}
        />
      </div>
    )
  }
}