我觉得我非常接近解决方案。我搜索了类似的问题,但我不相信我找到了我正在寻找的答案。
我想要的是什么:
我有一个带有长文本选项的选择下拉列表,并希望将句柄更改中的值替换为选项中的第一个单词,并将其设置为新的按钮选择选项。
我目前拥有的:
我将传入的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'));
<select>
没有'价值'属性。我们可以通过使用<options>
Please refer doc中的“selected”属性来获取选择框的值
我不知道它是否适合你,但如果你可以保持你的选择状态,你可以以某种方式操纵它们。但是使用此方法,在选择选项时会丢失长值。也许你可以从这个答案开始改进逻辑。
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>