Javascript 更改后的物料UI SelectField不起作用

我正在尝试使工作

材质ui

选择字段

组件

在我的项目中，common

select

组件工作没有问题，但是如果declare

SelectField

组件我有问题

问题在于调用

onChange

方法

如果我用

Select

component all works调用它，则单击并单击会更改该值

试验

被写入控制台

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

如果我用

SelectField

组件调用它。在

GUI

中，它只显示

subsystemitems

变量中的项目，但如果我尝试选择一个，则不会发生任何事情

试验

也不会写入控制台

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
子系统ID:'
};
this.handleSelectChange6=this.handleSelectChange6.bind（this）；
}
handleSelectChange6（事件）{
控制台日志（“测试”）；
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
如果（值==“Zvolit”）{
这是我的国家({
[姓名]：“”
});
}
否则{
这是我的国家({
[名称]：值
});
}
}
render（）{
返回(
{子系统项}
兹沃利特
{子系统项}
)
}
}

尝试使用material ui提供的组件

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

{
子系统项.map（（选项，键）=>(
))          
}

您使用哪个版本的材质ui“材质ui”：“^0.20.1”，您选择的子项字段不能是选项，但

MenuItem

现在我有了控制台输出。您能帮我从SelectField获取“Name”属性来处理更改吗？SelectField不提供Name属性，但您可以这样做：

onChange={（事件、索引、值）=>this.handleSelectChange6（值，'myField'）}

其中

myField

是您要用以标识字段的字符串。然后，您只需将此参数添加到

handleSelectChange6（事件，名称）

现在我遇到了一个问题，即在SelectField中看不到所选项目。选择后，我正确设置了变量。属性值不起作用。请将您的

handleSelectChange6

定义更改为接受

（值、名称）

而不是只接受

事件，加载页面后，它将显示预选的最后一项。如果我选择了某个内容，我可以在this.state.SubsystemID中更改变量，但在SelectField中它不会更改