如何解决你如何在react中渲染一个传播对象符号状态
研究以下反应代码:我需要在段落文本中显示用户选择的列表。事件处理程序对我来说似乎很好,只是无法弄清楚在对象上呈现什么
您的饮食限制: //一些代码应该在这里
如果用户选择多个选项,则显示应为单独的列表。
import React,{Component} from "react";
class App extends Component {
// manage state
constructor() {
super();
this.state = {
dietaryRestrictions: {
isVegan: false,isKosher: false,isLactoseFree: false
}
}
this.handleOnchange = this.handleOnchange.bind(this);
}
// custom functions
handleOnchange(event) {
const {name,value,type,checked} = event.target
type === "checkbox" ? this.setState(prevState => {
return {
dietaryRestrictions: {
...prevState.dietaryRestrictions,[name]: checked
}
}
}) : this.setState({
[name]: value
})
}
render() {
return(
<main>
<form>
<label>
<input
type="checkbox"
name="isVegan"
onChange={this.handleOnchange}
checked={this.state.dietaryRestrictions.isVegan}
/> Vegan?
</label><br />
<label>
<input
type="checkbox"
name="isKosher"
onChange={this.handleOnchange}
checked={this.state.dietaryRestrictions.isKosher}
/> Kosher?
</label><br />
<label>
<input
type="checkbox"
name="isLactoseFree"
onChange={this.handleOnchange}
checked={this.state.dietaryRestrictions.isLactoseFree}
/> Lactose Free?
</label><br />
</form>
<p>
Your dietary restrictions:
{/* What should i write here to display the selection(s) as a list?? */}
</p>
</main>
)
}
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。