Question

背景

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

问题

当用户选择其中一个选项时，如何在选中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
    };
  };

然后从props内访问TableDisplay？

Answer 1

首先，为了清楚您对state vs props的理解，您应该参考以下答案：What is the difference between state and props in React?

其次，要将SelectionBox的值传递给TableDisplay，您需要创建包含两个组件的某种父TableDisplayContainer组件。 TableDisplayContainer会将select下拉列表的值存储在其状态中。要执行此操作，您需要将作为道具的函数传递给SelectionBox，以处理onChange下拉列表的select事件（例如，您可以将其称为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

On React状态是与组件本身相关的东西，并且props向下传递给它（或者在遗漏的情况下具有默认值）。 handle events guide解释了我的解决方案：

您可以将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只是为了确保我不会忘记。

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

2 个答案: