动态生成的反应控制输入

Question

我有一个 window ，每次单击按钮都会生成一组 3 个 HTML 组合框（选择框）。 让我们说类别，子类别和数据。 子类别中的选项和数据根据其先前选择的值动态呈现。

我将选定的值存储为 object 的数组，例如

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

样本数据：

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

]

因此，从字面上看，第一组输入可以由exerciseData[0]指示，下一组由exerciseData[1].category等指示。

问题是我希望用户喜欢对组进行重新排序，例如向上移动 1 组或向下移动 1。所以我需要 select 框作为受控元素。 但是我该如何设置呢？

我试过这样：

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

当我像这样给出 select 框值时无法更改。它始终保持默认值。

任何建议将不胜感激提前谢谢

Answer 1

要控制输入，您需要通过 state 手动处理输入值。 在您的示例中，输入值似乎是固定/静态的。

以下代码片段是如何在 React 中创建受控select输入的示例。

更新：

制作了一个完整的演示片段。 请让我知道这是否是您要找的。

 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>

如果您有任何疑问，请告诉我。