在React中显示没有破折号的下拉列表选定值

Question

我试图在表单中的下拉列表中显示所选值。 要使用numeral.js显示其他值（数字），这项工作就可以了。

显示所选的下拉列表类别不会显示所选的选项文本，而是显示其值;我想在选项中显示文本。

这就是我正在做的事情。

ListItem.js

<span>Category: {category}</span>

Form.js

<select value={this.state.category} onChange={this.onCategoryChange}>
    <option value="food-and-drink">Food and Drink</option>
</select>

以下是提交表单时发送的道具（类别）

category: this.state.category,

ui是什么样的

如何删除食物和饮料之间的破折号（ - ）

更新了问题的答案（新代码）： 当我从下拉列表中选择选项/值时，状态从现在开始没有改变但是答案正在起作用，而不是用于UX

onCategoryChange = (e) => {
    const { selectedIndex } = e.target;
    const text = e.target.options[selectedIndex].innerHTML;
    this.setState({ category: text })
    // const category = e.target.value;
    // this.setState(() => ({ category }));
};

<select value={this.state.category} onChange={this.onCategoryChange}>
    <option value="travel">Travel</option>
    <option value="meeting">Meeting</option>
    <option value="food-and-drink">Food and Drink</option>
</select>

props.onSubmit（form.js）

 this.props.onSubmit({
            category: this.state.category
        });

Answer 1

您没有发布onCategoryChange()，但您可能正在通过value的{​​{1}}而不是<option>选项。

在您的情况下，text与value类似，'this-is-a-thing'与text类似，因此您希望使用this is a thing而不是text {1}}。

所以，你想要：

value

Answer 2

您可以使用以下内容将选项的文本存储在表单提交状态：

onCategoryChange = e => this.setState({ 
  category: e.target.options[e.target.selectedIndex].text 
})

value={this.state.category}组件上不需要<select />，除非您需要它作为受控组件（例如，从持久值设置初始选项）。如果是这样，您可以使用另一个状态来存储值，或者创建一个对象并将其用于从值到文本的映射。