Question

我正在尝试制作material-ui SelectField组件。

在我的项目中，常见的select组件正常工作，但是如果声明SelectField组件，我有问题。

问题出在调用onChange方法上。

如果我用Select组件调用它可以正常工作，则单击并更改值

测试

被写入控制台。

如果我使用SelectField组件来调用它。在GUI中，它仅显示subsystemsItems变量中的项目，但是如果我尝试选择一个项目，则什么都不会发生。

测试

也未写入控制台。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      SubsystemID: ''
    };
    this.handleSelectChange6 = this.handleSelectChange6.bind(this);
  }

  handleSelectChange6(event) {

    console.log("test");
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    if (value === "Zvolit") {
      this.setState({
        [name]: ''
      });
    }
    else {
      this.setState({
        [name]: value
      });
    }

  }
  render() {
    return (
      <div>
        <SelectField
          value={this.state.SubsystemID}
          onChange={this.handleSelectChange6}>
          {subsystemsItems}
        </SelectField>

        <select value={this.state.SubsystemID} name={"SubsystemID"} onChange={this.handleSelectChange6}>
          <option defaultValue>Zvolit</option>
          {subsystemsItems}
        </select>
      </div>
    )
  }
}

Answer 1

尝试使用material-ui提供的<MenuItem>组件

<SelectField
   value={this.state.SubsystemID}
   onChange={this.handleSelectChange6}>
      {
          subsystemsItems.map((option, key) => (
               <MenuItem key={key} value={option.value} primaryText={option.label} />
          ))          
      }
</SelectField>

Material-UI SelectField onChange不起作用

1 个答案: