[英]React change state based on select option
I need to store the distance value in state.我需要将距离值存储在状态中。 It should equal the distance passed as props + the distance selected by user.
它应该等于作为道具传递的距离+用户选择的距离。 How to do this?
这个怎么做?
class Distance extends React.Component {
constructor(props) {
super(props);
this.state = {
distance: 0
};
}
onChange = e => {
}
render() {
return (
<div>
<p>{this.props.distance}</p>
<select onChange={this.onChange}>
<option>30km</option>
<option>50km</option>
<option>70km</option>
</select>
</div>
);
}
}
Using functional components, you can do this:使用功能组件,您可以这样做:
const Distance = () => {
const [distance, setDistance] = useState("");
return (
<div>
<p>{distance}</p>
<select onChange={(e) => setDistance({distance: e.target.value})}>
<option value="30">30km</option>
<option value="50">50km</option>
<option value="70">70km</option>
</select>
</div>
);
};
export default Distance;
In a case where you have multiple inputs, and only distance
is a select input, you can do this to update distance
while maintaining the values of other inputs:如果您有多个输入,并且只有
distance
是选择输入,您可以这样做以更新distance
,同时保持其他输入的值:
const Distance = () => {
const [input, setInput] = useState({
distance: "",
time: "",
place: "",
});
return (
<div>
<p>{distance}</p>
<select onChange={(e) =>
setInput({ ...input, distance: e.target.value }}
>
<option value="30">30km</option>
<option value="50">50km</option>
<option value="70">70km</option>
</select>
</div>
);
};
export default Distance;
First add value
attributes to your <option>
elements, and then access the use the value
of the <select>
via e.currentTarget.value
in your onChange
handler like so:首先将
value
属性添加到您的<option>
元素,然后在onChange
处理程序中通过e.currentTarget.value
访问<select>
的value
,如下所示:
class Distance extends React.Component {
constructor(props) {
super(props);
this.state = {
distance: 0
};
}
onChange = e => {
// Extract value of select like so. Use parseInt for
// improved type safety
const valueSelectedByUser = parseInt(e.target.value);
// Update distance in state via setState()
this.setState({ distance : this.props.distance + valueSelectedByUser });
}
render() {
return (
<div>
<p>{this.props.distance}</p>
<select onChange={this.onChange}>
<option value="30">30km</option>
<option value="50">50km</option>
<option value="70">70km</option>
</select>
</div>
);
}
}
You should include value for select and handle onChange
event:您应该包含 select 的值并处理
onChange
事件:
class Distance extends React.Component {
constructor(props) {
super(props);
this.state = {
distance: 0
};
}
onChange = e => {
this.setState({
distance: this.props.distance ? this.props.distance + e.target.value : e.target.value
});
}
render() {
return (
<div>
<p>{this.props.distance}</p>
<select onChange={this.onChange}>
<option value="30">30km</option>
<option value="50">50km</option>
<option value="70">70km</option>
</select>
</div>
);
}
}
you can simply do this like this, I have converted your code to functional components and also modified it, try this.您可以像这样简单地执行此操作,我已将您的代码转换为功能组件并对其进行了修改,试试这个。
const Distance = () => {
const [distance, setDistance] = useState("");
return (
<div>
<p>{distance}</p>
<select onChange={(e) => setDistance(e.target.value)}>
<option value="30">30km</option>
<option value="50">50km</option>
<option value="70">70km</option>
</select>
</div>
);
};
export default Distance;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.