使用道具和状态将选择框的值传递给子组件 React.JS

Question

背景

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

题

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

例子

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>;
      }
}

研究

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

 constructor(props) {
    super(props);

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

然后从TableDisplay访问props ？

Answer 1

首先，为了澄清你对state和props理解，你应该参考这个答案： React 中 state 和 props 之间有什么区别？

其次，要将SelectionBox的值传递给TableDisplay您需要创建某种包含这两个组件的父TableDisplayContainer组件。 TableDisplayContainer将在其状态中存储select下拉列表的值。 为此，您需要将一个函数作为道具传递给将处理select下拉列表的onChange事件的SelectionBox （例如，您可以将其handleOnChange ）。 handleOnChange方法会将值设置为TableDisplayContainer的状态。 一旦它设置为状态，您就可以将该值作为道具传递给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>
    )
  }
}

Answer 2

React 状态是与组件本身相关的东西，并且道具被传递给它（或者在遗漏的情况下具有默认值）。 处理事件指南在下面解释了我的解决方案：

您可以将 onChange 处理程序传递给 selectionBox 并在您的 TableDisplay 组件上使用它

  class SelectionBox extends React.Component {
    render () {
      //...
        <select onChange={this.props.onChange}>
          //...
        </select>
      //...
    }
  }
  SelectionBox.propTypes = {
    onChange: PropTypes.func.isRequired
  }
  class TableDisplay extends React.Component {
    constructor(props) {
      super(props)
      this.onSelection = this._onSelection.bind(this)
      this.state = {
        selectValue: null
      }
    }
    _onSelection (ev) {
      this.setState({selectValue:ev.target.value})
    }
    render () {
      //...
      <SelectionBox onChange={this.props.onSelection} />
      //...
      <h1>{'The select value is '+ this.state.selectValue}</h1>
    }
}

请注意，我使用propTypes只是为了确保我不会忘记。