动态生成的反应控制输入

Question

I have a window where a group of 3 HTML combo box(select box) are generated on every button click. lets say category,subcategory and data. options in sub category and data are dynamically rendered based on its previous selected value.

i am storing the selected values as an array of object like

 const [exerciseData, setExerciseData] = useState([[]]);

Sample data:

exerciseData : [
  //first group 
    [
      category:"",
      subcategory:"",
      name:""
    ],
    //second group
    [
      category:"",
      subcategory:"",
      name:""
    ]

]

So literally first group of input can be indicated by exerciseData[0] and next by exerciseData[1].category etc..

The problem is i want there groups like to be reordered by the user like moving up 1 group or moving down by 1.So i need the select boxes to be a controlled element. But how can i set that?

I tried like this:

<select name="category" value={exerciseData[i].category} ... > {options} </select>

when i give like this the select box value cannot be changed.it always stays at its default value.

any suggestion will be appreciated Thanks in advance

Answer 1

To make an input controlled, you need to manually handle the input value via state. In your example, the input value seems to be fixed/static.

The following snippet is an example of how to create a controlled select input in React.

Update:

Made a full demo snippet. Please let me know if that is what you was looking for.

 const {useState, useCallback, Fragment} = React; const categories = [ { id: 'CAT.1', data: [ { id: 'CAT.1 SUB.A', data: [ {id: 'CAT.1 SUB.A OPT.1'}, {id: 'CAT.1 SUB.A OPT.2'}, {id: 'CAT.1 SUB.A OPT.3'} ] }, { id: 'CAT.1 SUB.B', data: [ {id: 'CAT.1 SUB.B OPT.1'}, {id: 'CAT.1 SUB.B OPT.2'}, {id: 'CAT.1 SUB.B OPT.3'} ] } ] }, { id: 'CAT.2', data: [ { id: 'CAT.2 SUB.A', data: [ {id: 'CAT.2 SUB.A OPT.1'}, {id: 'CAT.2 SUB.A OPT.2'}, {id: 'CAT.2 SUB.A OPT.3'} ] }, { id: 'CAT.2 SUB.B', data: [ {id: 'CAT.2 SUB.B OPT.1'}, {id: 'CAT.2 SUB.B OPT.2'}, {id: 'CAT.2 SUB.B OPT.3'} ] } ] }, ]; function Select(props) { const { name, options = [], onIndex } = props; const [value, setValue] = useState(options[0] && options[0].id); const onChangeHandler = useCallback((e) => { onIndex && onIndex(options.findIndex((item) => item.id === e.target.value)); setValue(e.target.value); }, [onIndex, options]); return ( <label> {name}: <select value={value} onChange={onChangeHandler}> { options.map((item) => { const {id} = item; return <option value={id}>{id}</option>; }) } </select> </label> ); } function Field() { const [catIndex, setCatIndex] = useState(0); const [subIndex, setSubIndex] = useState(0); return ( <div> <Select name='Category' options={categories} onIndex={setCatIndex}/> <Select name='Sub Category' options={categories[catIndex].data} onIndex={setSubIndex}/> <Select name='Option' options={categories[catIndex].data[subIndex].data}/> </div> ); } function App() { const [fields, setFields] = useState(() => [<Field />]); const addField = useCallback(() => { setFields((prevFields) => { const index = prevFields.lenght; return [...prevFields, <Field key={index} />]; }); }, []); return ( <Fragment> <form> {fields} </form> <button type='button' onClick={addField}>Add Field</button> </Fragment> ); } ReactDOM.render(<App />, document.getElementById('root'));

 form { display: flex; flex-direction: column; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id='root'></div>

Please let me know if you have any doubt.