[英]Change select value in react.js
I need your help !我需要你的帮助 !
I'm on a project for my compagny and I should create a select field that can be duplicate with React.我正在为我的公司做一个项目,我应该创建一个可以与 React 重复的选择字段。 So, I have a little problem when I want to save my selection, if I refresh the page, the default option still the same (and not the selected one).
所以,当我想保存我的选择时,我遇到了一个小问题,如果我刷新页面,默认选项仍然相同(而不是选定的选项)。 There is my code for select.js:
有我的 select.js 代码:
import React, { Component, PropTypes } from 'react';
class Select extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(data) {
this.setState({value:data.value});
}
render() {
return (
<label>
<select className="widefat" name={this.props.name} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
export default Select;
I change the default value :我更改了默认值:
When i change the select option当我更改选择选项时
I think it's because in select.js It initialize the value to '' and don't save the selection but I don't know how to save the selection.我认为这是因为在 select.js 中它将值初始化为 '' 并且不保存选择但我不知道如何保存选择。
Here's a way to accomplish this:这是实现此目的的方法:
import React, { Component, PropTypes } from 'react';
class Select extends Component {
constructor(props) {
super(props);
this.state = { value: props.value }; // can be initialized by <Select value='someValue' />
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<label>
<select className="widefat" value={this.state.value} name={this.props.name} onChange={this.handleChange.bind(this)}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
export default Select;
Going further走得更远
You could iterate in a map in the render method to implement this like so:您可以在渲染方法中的地图中迭代以实现如下:
render() {
const dictionary = [
{ value: 'grapefruit', label: 'Grapefruit' },
{ value: 'lime', label: 'Lime' },
{ value: 'coconut', label: 'Coconut' },
{ value: 'mango', label: 'Mango' }
];
return (
<label>
<select
className="widefat"
value={this.state.value}
name={this.props.name}
onChange={this.handleChange}
>
{dictionary.map(
// Iterating over every entry of the dictionary and converting each
// one of them into an `option` JSX element
({ value, label }) => <option key={value} value={value}>{label}</option>
)}
</select>
</label>
);
}
The target event property returns the element that triggered the event.目标事件属性返回触发事件的元素。 It stores a lot of properties, print it to the console, that would familiarize with its capabilities
它存储了很多属性,将其打印到控制台,以便熟悉其功能
import React, { Component } from 'react';
class Select extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = e => this.setState({ value: e.target.value });
render() {
return (
<label>
<select className="widefat" name={this.props.name} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
export default Select;
After a long journey to search in documentation and in the depth of internet I found my answer.经过漫长的文档搜索和互联网深度搜索,我找到了答案。 I forgot to add a "for" for my label.
我忘了为我的标签添加一个“for”。 There is my final code :
有我的最终代码:
import React, { Component, PropTypes } from 'react';
class Select extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: this.props.value});
}
render() {
return (
<label htmlFor={this.props.id}>{this.props.label}
<select defaultValue={this.props.value} id={this.props.id} className="widefat" name={this.props.name} onChange={this.handleChange.bind(this)}>
<option>Aucun</option>
<option value="55">Option 2</option>
<option value="126">Backend configuration & installation</option>
<option value="125">Frontend integration</option>
<option value="124">Graphic Design</option>
</select>
</label>
);
}
}
export default Select;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.