reactjs - 在 Reactjs 中选择输入类型

Question

我必须在一个组件中使用多个选择框。但是当我将 value 属性设置为状态时，我必须让它们成为控制组件，它不能正常工作。当我使用一个选择框时，另一个也会改变。我怎么解决这个问题。谢谢。

`
const handleChange = (event) => {
    setValue(event.target.value);
};

const [value, setValue] = useState();
`

.....................

`
{item.extraItem ? item.extraItem.map((byProduct) => (
       <div>
          <p className="price-text">{byProduct.extraPrice}$</p>
          <p>{byProduct.extraName}</p>
          <select name={byProduct.extraName} value={value} onChange={handleChange}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
          </select>
       </div>
)): null}
`

标签： reactjs

Answer 1

当我将 value 属性设置为 state 时，它​​无法正常工作。当我使用一个选择框时，另一个也会改变

这是因为对于所有选择框，您都使用来自状态的公共值，要克服这个问题，您应该为每个选择框使用单独的状态值，例如您的状态应该是

 const [values, setValues] = useState([]);

现在你的事件处理程序应该像

 const handleChange = (index,value) => {
      let curValues=[...values];
      curValues[index]=value;
    setValue(curValues);
};

你的渲染方法应该像

  {item.extraItem ? item.extraItem.map((byProduct,index) => (
   <div>
      <p className="price-text">{byProduct.extraPrice}$</p>
      <p>{byProduct.extraName}</p>
      <select name={byProduct.extraName} value={values[index]} onChange={(e)=>handleChange(index,e.target.value)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
      </select>
   </div>
 )): null}