Question

我觉得我已经很接近这个问题的解决方案了。我搜索了类似的问题，但我不相信我已找到所需的答案。

我想要的是：

我有一个带长文本选项的选择下拉列表，想用该选项中的第一个单词替换句柄更改中的值，并将其设置为新的按钮选择选项。

我目前拥有的是：

我将传入的handleChange修改为第一个单词，尝试在选择按钮上进行设置，但从未发生。

codepen：c5 d9 fc ce

代码：

HTML

https://codepen.io/anon/pen/gdXVJM?editors=1011

JS

<div id="input"></div>

Answer 1

<select>没有“值”属性。我们可以使用<options>中的'selected'属性来获得选择框的值 Please refer doc

Answer 2

我不知道它是否适合您，但是如果您可以将选项保持在某种状态，则可以通过某种方式对其进行操作。但是，使用这种方法时，选择一个选项会丢失长值。也许您可以从这个答案开始改善逻辑。

class App extends React.Component {
  state = {
    options: [
      "Ivy [English - American]",
      "Joanna [English - American]",
      "Joey [English - American]",
      "Justin [English - American]"
    ],
    selectedIndex: 0
  };

  handleChange = event => {
    const { selectedIndex, value } = event.target;
    const { options } = this.state;
    var firstWord = value.replace(/ .*/, "");
    const newOptions = Object.assign([], options, {
      [selectedIndex - 1]: firstWord
    });
    this.setState({ options: newOptions, selectedIndex });
  };

  render() {
    const { options } = this.state;
    return (
      <select
        id="voiceSelected"
        value={this.state.options[this.state.selectedIndex - 1]}
        name={this.state.buttonStyle}
        onChange={this.handleChange}
      >
        <option value="">Choose Voice</option>
        {
            options.map( option =>
                <option key={option}>{option}</option>
            )
        }
      </select>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

选择选项：用新值替换文本

2 个答案: