Выберите Параметры: заменить текст новым значением - PullRequest
Новая
       24

Выберите Параметры: заменить текст новым значением

0 голосов
/ 08 сентября 2018

Мне кажется, что я очень близок к решению этой проблемы. Я искал похожие вопросы, но не верю, что нашел ответ, который искал.

Что бы я хотел:

У меня есть раскрывающийся список выбора с параметрами длинного текста, и я хотел бы заменить значение из изменения дескриптора первым словом в параметре и установить его в качестве новой опции выбора кнопки.

Что у меня сейчас есть:

Я изменяю входящий handleChange на первое слово, пытаюсь установить его на кнопке выбора, и это никогда не происходит.

код: 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'));

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Я не знаю, подходит ли вам это, но если вы можете сохранить ваши настройки в состоянии, вы можете каким-то образом ими манипулировать. Но с этим методом вы теряете длинные значения при выборе опции. Может быть, вы можете улучшить логику, начиная с этого ответа. 

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>
0 голосов
/ 08 сентября 2018

<select> не имеет атрибута «значение». мы можем получить значение поля выбора с помощью атрибута selected в <options> Пожалуйста, обратитесь документ

...