Question

我正在使用React-Bootstrap，但是我的选择选项有问题。它们没有正确更新。在我的示例中，我以“阿尔巴尼亚”为第一个国家。但是，当我尝试选择另一个国家并单击“提交”时，它可以按预期工作，但是“阿尔巴尼亚”选项不会更改为我选择的另一个国家。

这是我当前的代码：

class DynamicSelect extends Component {
   handleChange = (event) => {
      let selectedValue = event.target.value;
      this.props.onChange(selectedValue);
   }

   render() {
      let arrayOfData = this.props.arrayOfData;
      let options = arrayOfData.map((data) =>
         <option key={uuidv4()} value={data.name}>
            {data.name}
         </option>
      );

      return (
         <Form.Group controlId="formBasicRangeCustom">
            <Form.Control onChange={this.handleChange} as="select" size="sm">
               {options}
            </Form.Control>
         </Form.Group>
      )
   }
}

export default DynamicSelect;

arrayOfData看起来像这样：

export const arrayOfData = [
   {
      name: 'Albania',
      id: 'AL'
   },
   {
      name: 'Austria',
      id: 'AT'
   },
]

p.s。在我有Form.Control的{{1}}下，我尝试对{options}进行硬编码，并且按预期运行。但想法不是对它们进行硬编码

React Bootstrap-选择无法正确更新所选选项

0 个答案: