文本框
import React,{Component} from 'react'; class App extends Component { constructor(props) { super(props); this.handleInputChange = this.handInputChange.bind(this); this.handleTextareaChange = this.handleTextareaChange.bind(this); this.state = { inputValue: '',textareaValue = ''; }; } handleInputChange(e) { this.setState({ inputValue: e.target.value }); } handleTextareaChange(e) { this.setState({ textareaValue: e.target.value }); } render() { const {inputValue,textareaValue} = this.state; return ( <div> <p>单行输入框:<input type="text" value={inputValue} onChange={this.handleInputChange} /></p> <p>多行输入框:<textarea value={e} onChange={this.handleTextareaChange} /></p> ) } }
单选按钮
import React,{Component} from 'react'; class App extends Component{ constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { radioValue: '' }; } handleChange(e) { this.setState({ radioValue: e.target.value }); } render() { const {radioValue} = this.state; return ( <div> <p>gender:</p> <label> male: <input type="text" value="male" checked={radioValue === 'male'} onChange={this.handChange} /> </label> <label> female: <input type="text" value="female" checked={radioValue === 'female'} onChange={this.handChange} /> </label> ) } }
复选框
import React,{Component} from 'react'; class App extends Component { constructor(props) { super(props); this.handChange = this.handChange.bind(this); this.state = { coffee: [] }; } handleChange(e) { const {checked,value} = e.target; let {coffee} = this.state; if (checked && coffee.indexOf(value) === -1) { coffee.push(value); } else { coffee = coffee.filter(i => i !== value); } this.setState({ coffee }); } render() { const {coffee} = this.state; return ( <div> <p>请选择你最喜欢咖啡:</p> <label> <input type="checkbox" value="Cappuccino" checked={coffee.indexOf('Cappuccino') !== -1} onChange={this.handleChange} /> Cappuccino </label> <br /> <label> <input type="checkbox" value="CafeMocha" checked={coffee.indexOf('CafeMocha') !== -1} onChange={this.handleChange} /> CafeMocha </label> <br /> <label> <input type="checkbox" value="CaffeLatte" checked={coffee.indexOf('CaffeLatte') !== -1} onChange={this.handleChange} /> CaffeLatte </label> <br /> <label> <input type="checkbox" value="Machiatto" checked={coffee.indexOf('Machiatto') !== -1} onChange={this.handleChange} /> Machiatto </label> ) } }
Select组件
import React,{Component} from 'react'; class App extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { area: ['beijing','shanghai'] }; } handleChange(e) { const {options} = e.target; // 注意,这里返回的options是一个对象,并非数组 const area = Object.keys(options).filter(i => options[i].selected === true).map(i => options[i].value); this.setState({ area: area }); } render() { const {area} = this.state; return ( <select multiple={true} value={area} onChange={this.handleChange}> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="hangzhou">杭州</option> </select> ); } }
Select多选组件
import React,{Component} from 'react'; class App extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { area: '' }; } handleChange(e) { this.setState({ area: e.target.value }); } render() { const {area} = this.state; return ( <select value={area} onChange={this.handleChange}> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="hangzhou">杭州</option> </select> ); } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。