嗨,我正在使用带有负和正值的反应多选。当我选择-1时 它会自动更改为1。因此无法选择-1。其他值工作正常。
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: '1'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange} multiple>
<option value="-1">Grapefruit</option>
<option value="0">Lime</option>
<option value="1">Coconut</option>
<option value="2">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<FlavorForm />,
document.getElementById('root')
);
请使用反应式多重选择帮助选择-1。
答案 0 :(得分:1)
如果基于documentation的倍数为true,则使用数组作为值。 对于多选行为,请使用in this post中所述的选项。
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ['1']};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = ({target}) => {
this.setState(prevState => ({
value: [].filter.call(target.options, o => o.selected).map(o => o.value)
}));
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange} multiple>
<option value="-1">Grapefruit</option>
<option value="0">Lime</option>
<option value="1">Coconut</option>
<option value="2">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<FlavorForm />,
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>
答案 1 :(得分:0)
我注意到我的控制台正在记录以下错误
警告:如果
value
为true,则提供给multiple
的prop必须是一个数组。
我自由地修复了这个问题,恰好-1
选择开始起作用:
class FlavorForm extends React.Component {
constructor (props) {
super(props)
this.state = { values: [] }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange (event) {
const values = this.state.values.includes(event.target.value)
? this.state.values
: this.state.values.concat(event.target.value)
this.setState({ values: values })
}
handleSubmit (event) {
alert(`Your favorite flavor is: ${this.state.values}`)
event.preventDefault()
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select
value={this.state.values}
onChange={this.handleChange}
multiple
>
<option value="-1">Grapefruit</option>
<option value="0">Lime</option>
<option value="1">Coconut</option>
<option value="2">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
答案 2 :(得分:0)
您需要将state的values属性存储为数组,即:
this.state = {
values: []
}
然后,将handleChange更改为此:
handleChange(event) {
let choices = event.target.selectedOptions;
let final = [];
for(let i=0; i<choices.length; i++) {
final.push(choices[i].value);
}
this.setState({ value: final });
}
它应该可以工作。
以下是工作版本的链接: https://codesandbox.io/s/p3705q0zm
干杯!
答案 3 :(得分:-1)
从选择元素中删除值属性,该属性在那里无效。
<select onChange={this.handleChange} multiple>...</select>