Как мне реализовать select в react?

146

22 марта 2019, 11:10

Пытаюсь понять как работает select вместе с react+redux. Не пойму как мне изменять state по событию handleChange, тоесть записать выбранный параметр, так как он может быть только один? Кто то может объяснить?

Детальный пример кода тут

import React from "react"; 
import ReactDOM from "react-dom"; 
import Select from "@material-ui/core/Select/Select"; 
import InputLabel from "@material-ui/core/InputLabel/InputLabel"; 
import FormControl from "@material-ui/core/FormControl/FormControl"; 
import MenuItem from "@material-ui/core/MenuItem/MenuItem"; 
 
class App extends React.Component { 
  state = { 
    selectRender: [ 
      { 
        title: "Title 1", 
        value: "" 
      }, 
      { 
        title: "Title 2", 
        value: "" 
      }, 
      { 
        title: "Title 3", 
        value: "" 
      } 
    ] 
  }; 
  handleChange = index => event => { 
    this.setState({ 
      selectValue: { 
        ...this.state.selectRender, 
        [index]: event.target.value 
      } 
    }); 
    console.log(event.target.value); 
    console.log(index); 
  }; 
  render() { 
    const renderSelect = this.state.selectRender.map((item, index) => ( 
      <FormControl key={index} style={{ width: "100%", marginTop: "27px" }}> 
        <InputLabel htmlFor="age-auto-width">{item.title}</InputLabel> 
        <Select 
          id={item.index} 
          value={this.state.selectRender[item.value]} 
          onChange={this.handleChange(item.index)} 
          inputProps={{ 
            name: "selectValue" 
          }} 
        > 
          <MenuItem value="kilograms">Kilograms</MenuItem> 
          <MenuItem value="meters">Meters</MenuItem> 
          <MenuItem value="minutes">Minutes</MenuItem> 
        </Select> 
        value: {item.value} 
      </FormControl> 
    )); 
    return <div className="App">{renderSelect}</div>; 
  } 
} 
 
const rootElement = document.getElementById("root"); 
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

import FormControl from '@material-ui/core/FormControl'; 
import FormHelperText from '@material-ui/core/FormHelperText'; 
import Input from '@material-ui/core/Input'; 
import InputLabel from '@material-ui/core/InputLabel'; 
import Select from '@material-ui/core/Select'; 
import React from 'react'; 
 
const onChange = (input: WrappedFieldInputProps) => (event) => 
  input.onChange(event.target.value); 
 
export const SelectField = ({ input, meta: { touched, error }, children, ...custom }: ISelectFieldProps) => { 
  return ( 
<FormControl error={touched && error}> 
  <InputLabel htmlFor={'input-id'}>{'Label'}</InputLabel> 
  <Select 
    error={touched && error} 
    {...input} 
    input={<Input name={input.name} id={'input-id'} />} 
    onChange={onChange(input)} 
    children={children} 
    {...custom} 
  /> 
  {touched && error && <FormHelperText>{error}</FormHelperText>} 
</FormControl> 
  ); 
};

Исплоьзование:

export const ProjectFieldJsx: React.StatelessComponent<IProjectFieldProps> = ({ 
  className, 
  name, 
}) => ( 
  <Field name={name} component={SelectField} className={className} label={'Label'}> 
<MenuItem value={'value1'}> 
  Label1 
</MenuItem> 
<MenuItem value={'value2'}> 
  Label2 
</MenuItem> 
  </Field> 
);