将状态中的字符串数组映射到作为道具的选择？答案

【问题标题】：Map array of strings in state to a select as props?将状态中的字符串数组映射到作为道具的选择？
【发布时间】：2020-06-24 03:27:13
【问题描述】：

我有一个父组件，它看起来像下面设置为状态的 btnColor 数组：

export default class Contact extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        btnColor: ['White', 'Silver', 'Grey', 'Black', 'Orange']
    }
}

我还有一个子选择组件，如下所示：

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>
)}

我想做的是将 btnColor 数组中的所有项目映射到子组件中，然后将它们用作 FormSelect 组件中的下拉选项。

理想情况下寻找不涉及钩子的答案。 - 提前感谢您的任何帮助。

【问题讨论】：

你使用材质 UI 吗？ 2) 是子组件中的表单吗？是否要访问父组件中的选定选项
您的this.state.btnColor 似乎是一个字符串，而不是一个数组
@CodeZombie 对除了材质 UI 之外的所有选项都是。
@evaline - 你是对的，我已经更新了代码。谢谢。

标签： reactjs state

【解决方案1】：

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

class Select extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btnColor: ["White", "Silver", "Grey", "Black", "Orange"],
      submitted: false,
      colorValue: ""
    }; 
  }

  selectHandler = (event) => {
    this.setState({
      colorValue: event.target.value 
    })
  }

 render() {
   const options = this.state.btnColor.map(color => <option key={`${Math.random().toString(26).slice(2)-${color}}} value={color}>{color}</option>);

 return (
  <div>
    <label htmlFor="colorValue">Choose a color:</label>
    <select
      name="colorValue"
      value={this.state.colorValue}
      onChange={selectHandler}
    >
      <option value="">--Please choose an option--</option>
      {options}
    </select>
  </div>
    );
  }
}

【讨论】：

【解决方案2】：

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

示例

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,
        selected: ''
    }

    selectHandler = (event) => {
        this.setState({submitted: true, selected: event.target.value});
    }



    function render() {
        <FormSelect onSelect={onSelect} />
    }
}

还有选择组件：

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

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

    </div>
)}

请注意，在Contact 组件中，我添加了一个新状态selected，一旦触发事件onchange，它将存储所选值。

【讨论】：

谢谢，不过我的 map 函数在 value 属性上还是有问题。