react表单练习
import React from 'react'; const genders = [ { id: 0, text: "男", value: "male" }, { id: 1, text: "女", value: "famale" } ] const hobbies = [ { id: 0, text: "html", value: "html" }, { id: 1, text: "css", value: "css" }, { id: 2, text: "javascript", value: "javascript" } ] const cities = [ { id: 0, text: "成都", value: "chengdu" }, { id: 1, text: "重庆", value: "chongqing" }, { id: 2, text: "北京", value: "beijing" } ] export default class extends React.Component { state = { name: "zhangsan", gender: { id: 1, text: "女", value: "famale" }, hobby: [ { id: 1, text: "css", value: "css" }, { id: 2, text: "javascript", value: "javascript" } ], city: { id: 2, text: "北京", value: "beijing" } } setHobby = (check, value) => { console.log(value); if (check) { this.setState({ hobby: [...this.state.hobby,value] }) } else { this.setState({ hobby: this.state.hobby.filter(item =>item.id!==value.id) }) } } render() { return ( <div> <ul> <li>name: {this.state.name}</li> <li>gender: {this.state.gender.text}</li> <li>hobby: {this.state.hobby.map(item => item.text).join(",")}</li> <li>city: {this.state.city.text}</li> </ul> <h3>input type="text"</h3> 姓名:<input type="text" value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value, }) }} /> <h3>input type="radio"</h3> 性别：{genders.map(item => ( <label key={item.id}>{item.text} <input type="radio" checked={this.state.gender.id === item.id} name="gender" value={item.value} onChange={(e) => { this.setState({ gender: { ...item }, }) }} /> </label> ))} <h3>input type="checkbox"</h3> 兴趣：{hobbies.map(item => ( <label key={item.id}>{item.text} <input type="checkbox" checked={this.state.hobby.some(v => { if (v.id == item.id) { return true; } return false; })} name="hobbies" value={item.value} onChange={(e) => { this.setHobby(e.target.checked, item); }} /> </label> ))} <h3>select</h3> <select value={this.state.city.id} onChange={(e)=>{ this.setState({ city:cities.filter(item=>item.id===~~e.target.value)[0] }) }}> {cities.map(item=><option value={item.id} key={item.id}>{item.text}</option>)} </select> </div> ) } }
import React from 'react';
const genders = [
{ id: 0, text: "男", value: "male" },
{ id: 1, text: "女", value: "famale" }
]
const hobbies = [
{ id: 0, text: "html", value: "html" },
{ id: 1, text: "css", value: "css" },
{ id: 2, text: "javascript", value: "javascript" }
]
const cities = [
{ id: 0, text: "成都", value: "chengdu" },
{ id: 1, text: "重庆", value: "chongqing" },
{ id: 2, text: "北京", value: "beijing" }
]
export default class extends React.Component {
state = {
name: "zhangsan",
gender: { id: 1, text: "女", value: "famale" },
hobby: [
{ id: 1, text: "css", value: "css" },
{ id: 2, text: "javascript", value: "javascript" }
],
city: { id: 2, text: "北京", value: "beijing" }
}
setHobby = (check, value) => {
console.log(value);
if (check) {
this.setState({
hobby: [...this.state.hobby,value]
})
}
else {
this.setState({
hobby: this.state.hobby.filter(item =>item.id!==value.id)
})
}
}
render() {
return (
<div>
<ul>
<li>name: {this.state.name}</li>
<li>gender: {this.state.gender.text}</li>
<li>hobby: {this.state.hobby.map(item => item.text).join(",")}</li>
<li>city: {this.state.city.text}</li>
</ul>
<h3>input type="text"</h3>
姓名:<input type="text" value={this.state.name} onChange={(e) => {
this.setState({
name: e.target.value,
})
}} />
<h3>input type="radio"</h3>
性别：{genders.map(item => (
<label key={item.id}>{item.text}
<input type="radio" checked={this.state.gender.id === item.id} name="gender" value={item.value} onChange={(e) => {
this.setState({
gender: { ...item },
})
}} />
</label>
))}
<h3>input type="checkbox"</h3>
兴趣：{hobbies.map(item => (
<label key={item.id}>{item.text}
<input type="checkbox" checked={this.state.hobby.some(v => {
if (v.id == item.id) {
return true;
}
return false;
})} name="hobbies" value={item.value} onChange={(e) => {
this.setHobby(e.target.checked, item);
}} />
</label>
))}
<h3>select</h3>
<select value={this.state.city.id} onChange={(e)=>{
this.setState({
city:cities.filter(item=>item.id===~~e.target.value)[0]
})
}}>
{cities.map(item=><option value={item.id} key={item.id}>{item.text}</option>)}
</select>
</div>
)
}
}
