Question

我正在使用SelectField材料-ui作为我的反应项目。我从这个答案中尝试了很多方法Can't get the target attributes of material-ui select react component 。

但它们不起作用。我target.id总是等于"" 如何获取属性（如id）。

这是我的代码：

constructor(props) {
    super(props);
    this.state = {
        form: {
            resident_city: ''

        },
        ret_code: '',
        ret_msg: ''
    };
    this.handleList = this.handleList.bind(this);
}

handleList(event, index, value) {
    event.persist()
    const field = event.target.id;
    const form = this.state.form;
    form[field] = value;
    console.log(event, value)
    this.setState({
        form
    });
    console.log(form);
}


        <form>
            <SelectField
                style={style}
                id="city"
                value={this.state.form.resident_city}
                onChange={this.handleList}
                maxHeight={200}
            >
                {cities}
            </SelectField>
        </form>

更新

我尝试使用SelectField而没有form，我仍然无法获得id属性。这真让我感到困惑。

Answer 1

在主要组件上定义一个用于选择表单组件的prop名称，假设您的城市组件被调用：cityForm

你的cityForm组件中的

render() { 
return (
       <SelectField
                style={style}
                value={this.props.city}
                onChange={(e, index, value) => this.props.selectChange(e, index, value, this.props.cityName)}
                maxHeight={200}
            >
                {cities}
            </SelectField>
);
}
}

在你的主要作品中你会说（代码被删除了一些部分省略）

handleSelectChange(e, index, value, name){
      this.setState({
      [name] : value,
    });
  }

render(){ 
 return (
  <cityForm cityName = "city1"  city={this.state.city1} selectChange={this.handleSelectChange}/>
  );
 }
}

我正在构建一个动态表单生成器，它为我做了诀窍=）。

Answer 2

如果使用 React 类组件，则可以通过其状态对象访问选定的值。

或者，在 Redux 的帮助下，Select 的 onChange 方法可以调度操作并更新主应用程序状态中的值。

当更新主状态不可行并且选择函数组件而不是类组件时，从函数外部的组件获取值变得很麻烦。

修复它的一种简单方法是添加一个隐藏输入，引用与 select 使用的值相同的值。考虑下面的一段代码。它使用 Selector field1 通过内部组件状态更新值并将其绑定到隐藏字段 theField。该值可以在调度期间进一步读取外部函数，就像表单中的任何其他输入字段值一样。

import React, { useState } from 'react';
import { Button, FormControl, MenuItem, Select } from '@material-ui/core';
import { connect } from 'react-redux';

const mapStateToProps = () => ({
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  submitForm: (event) => {
    event.preventDefault();
    console.log(event.target.theField.value);
    dispatch({
      type: 'UPDATE_THE_FIELD',
      theField: event.target.theField.value,
    });
  }
});

function Main(props) {
  const [field1, setField1] = useState("v1");

  return (
    <>
      <form onSubmit={(event) => { props.submitForm(event, props) }}>
        <FormControl>
          <Select
            value={field1}
            onChange={(event) => setField1(event.target.value)}
          >
            <MenuItem value="v1">V1</MenuItem>
            <MenuItem value="v2">V2</MenuItem>
          </Select>
        </FormControl>
        <Button type="submit">Update</Button>
        <input type="hidden" name="theField" value={field1} />
      </form>
    </>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

无法获取材料的属性-ui SelectField in react

2 个答案: