映射状态数组以形成基于所选选项的选择和更新状态。 (反应)

问题描述 投票:-1回答:2

我有一个具有以下数组的表单组件:

export default class Contact extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        btnColor: ['White', 'Silver', 'Grey', 'Black', 'Orange', 'Brown', 'Maroon', 'Green', 'Olive', 'Red', 'Cyan', 'Blue', 'DarkBlue', 'LightBlue', 'Purple', 'Yellow', 'Lime', 'Magenta'],
        submitted: false,
    }
}

我也有一个选择组件,看起来像这样:

const FormSelect = ({
name,
type,
placeholder,
onChange,
className,
value,
error,
children,
label,
btnColor,
...props}) => {

return (
    <div className={className}>
        <label htmlFor={name}>{label}</label>
        <select>
            <option
                id={name}
                name={name}
                type={type}
                placeholder={placeholder}
                onChange={onChange}
                value={btnColor.map(btnColor)}
            />
        </select>

    </div>
)}

我想做的是以某种方式将数组映射到select组件,并将数组中的项目用作select中的选项。这也应该更新状态。

现在,我感到既然数组位于主窗体组件中,所以我可能正在处理此错误。

由于我的项目正在使用状态,因此理想情况下是寻找不包含钩子的答案。 -预先感谢您的协助。

reactjs forms state
2个回答
0
投票

好,我建议将状态修饰符函数传递给<select>组件并为onchange添加事件处理程序。


0
投票

这里是一个如何使数组中的项目作为选项的示例。

© www.soinside.com 2019 - 2024. All rights reserved.