使用道具和狀態將選擇框的值傳遞給子組件 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只是為了確保我不會忘記。