ReactJS在組件渲染上設置onchange

Question

我制作了一個名為DropDown的組件：

export default class DropDown extends React.Component {
    render(){
        return(
            <select multiple={this.props.multiple} onChange={this.props.onchange} id={this.props.id} className={this.props.class}>
                {this.props.children}
            </select>
        )
    }
}

並想在另一個組件中使用它：

getSelected = (e) => {
console.log(e);
};
render(){
    return(
        <DropDown id="Test" multiple onChange="this.getSelected()" class="ui fluid dropdown search" ref="Item">
            {Data.map((v,i) => {
                return (
                    <option key={i} value={v.id}>{v.name}</option>
                )
            })}
        </DropDown>
}
}

如您所見，我想有一個動態的DropDown，並希望傳遞id，class，multiple，甚至onchange函數名，class和id都很好，但是multiple和onchange函數不起作用，我該如何傳遞multiple和handle函數名在組件中發生更改事件？

Answer 1

對於倍數，如果要布爾值，請使用multiple={true}而不是不帶值的倍數，如果您要檢查已定義還是未定義，但在這種情況下不理想，則可以使用。

對於onChange，您需要傳遞onChange={this.getSelected} ，從而以所需的方式傳遞函數。 請注意，事件對象將自動傳遞給getSelected。

下一段不是您的用例，但很高興知道...

如果您想將特定參數傳遞給getSelected，則可以執行onChange={() => {this.getSelected("hello");}但是您必須向該類中添加一個構造函數，並在該行中添加this.getSelected = this.getSelected.bind(this); 因此該函數知道'this'是指類而不是click事件。

Answer 2

你差點知道了！ 確保從上級組件傳遞的道具與該組件中使用的道具完全匹配。

例如，在您的Dropdown組件中，使用onChange={this.props.onchange}但實際上將道具命名為<DropDown onChange="this.getSelected()"> 。 那里有錯字。 它應該是onChange={this.props.onChange}

此外，在傳遞函數作為道具時，您無需啟動它，只需傳遞對它的引用，例如<DropDown onChange={this.getSelected}>

請參閱沙箱和工作代碼： https : //codesandbox.io/s/hungry-raman-jbdph

App.js

import React from "react";
import ReactDOM from "react-dom";
import DropDown from "./DropDown";

import "./styles.css";

const data = [{ id: 1, name: "Fred" }, { id: 2, name: "Burger" }];

class App extends React.Component {
  getSelected = e => {
    console.log(e.target.value);
  };

  dropdownRef = React.createRef();

  componentDidMount() {
    if (this.dropdownRef.current) {
      console.log(this.dropdownRef.current);
    }
  }

  render() {
    return (
      <DropDown
        onChange={this.getSelected}
        multiple
        reference={this.dropdownRef}
      >
        {data.map((item, index) => {
          return <option value={item.id}>{item.name}</option>;
        })}
      </DropDown>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

DropDown.js

import React from "react";

class DropDown extends React.Component {
  render() {
    return (
      <select
        ref={this.props.reference}
        multiple={this.props.multiple}
        onChange={this.props.onChange}
        id={this.props.id}
        className={this.props.class}
      >
        {this.props.children}
      </select>
    );
  }
}

export default DropDown;