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

Question

我觉得我非常接近解决方案。我搜索了类似的问题，但我不相信我找到了我正在寻找的答案。

我想要的是什么：

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

我目前拥有的：

我将传入的handleChange修改为第一个单词，尝试在选择按钮上设置它，它永远不会发生。

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

码：

HTML

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

JS

    class MyInput extends React.Component{
    constructor(props){
    super(props);
    this.state = {
      buttonStyle: '',
      voiceSelected: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }

 handleChange(event) {
    event.persist();
     if (event.target.id === 'voiceSelected') {

      //set the state we're going to use later

      this.setState(() => ({ 'voiceSelected': event.target.value}));

      //Take the first word from the string to make it visable on button

      let totalWords = event.target.value
      var firstWord = totalWords.replace(/ .*/,'');
      console.log(firstWord)
      this.setState(() => ({'buttonStyle': firstWord}));



    } else {
      console.log("Something Went Wrong!")
    }
  }

  render(){
    return  <select 
              id="voiceSelected" 
              value={this.state.buttonStyle} 
              name={this.state.buttonStyle} 
              onChange={(e) => {this.handleChange(e)}}
              >
      <option value="" selected disabled hidden>Choose Voice</option>
      <option value="Ivy">Ivy [English - American]</option>
      <option value="Joanna">Joanna [English - American]</option>
      <option value="Joey">Joey [English - American]</option>
      <option value="Justin">Justin [English - American]</option>
      <option value="Kendra">Kendra [English - American]</option>
      <option value="Kimberly">Kimberly [English - American]</option>
      <option value="Salli">Salli [English - American]</option>
      <option value="Nicole">Nicole [English - Australian]</option>
      <option value="Russell">Russell [English - Australian]</option>
      <option value="Emma">Emma [English - British]</option>
      <option value="Brian">Brian [English - British]</option>
      <option value="Amy">Amy [English - British]</option>
      <option value="Raveena">Raveena [English - Indian]</option>
      <option value="Geraint">Geraint [English - Welsh]</option>
      <option value="Ricardo">Ricardo [Brazilian Portuguese]</option>
      <option value="Vitoria">Vitoria [Brazilian Portuguese]</option>
      <option value="Lotte">Lotte [Dutch]</option>
      <option value="Ruben">Ruben [Dutch]</option>
      <option value="Mathieu">Mathieu [French]</option>
      <option value="Celine">Celine [French]</option>
      <option value="Chantal">Chantal [Canadian French]</option>
      <option value="Marlene">Marlene [German]</option>
      <option value="Dora">Dora [Icelandic]</option>
      <option value="Karl">Karl [Icelandic]</option>
      <option value="Carla">Carla [Italian]</option>
      <option value="Giorgio">Giorgio [Italian]</option>
      <option value="Mizuki">Mizuki [Japanese]</option>
      <option value="Liv">Liv [Norwegian]</option>
      <option value="Maja">Maja [Polish]</option>
      <option value="Jan">Jan [Polish]</option>
      <option value="Ewa">Ewa [Polish]</option>
      <option value="Cristiano">Cristiano [Portuquese]</option>
      <option value="Ines">Ines [Portuquese]</option>
      <option value="Carmen">Carmen [Romanian]</option>
      <option value="Maxim">Maxim [Russian]</option>
      <option value="Tatyana">Tatyana [Russian]</option>
      <option value="Enrique">Enrique [Spanish]</option>
      <option value="Penelope">Penelope [US Spanish]</option>
      <option value="Enrique">Miguel [US Spanish]</option>
      <option value="Conchita">Conchita [Castilian Spanish]</option>
      <option value="Astrid">Astrid [Swedish]</option>
      <option value="Filiz">Filiz [Turkish]</option>
      <option value="Gwyneth">Gwyneth [Welsh]</option>
  </select>
  }
}

ReactDOM.render(<MyInput/>, document.getElementById('input'));

Answer 1

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

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>