import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { nameZs : "张三", nameInfo: '姓名：', nameChangeInfo: '用户名变更“', nameChangeEnd : '”。', submitInfo: '提交', nameChangeInfoBegin: '”',}// 使用state，没有绑定按钮事件class FormComp extends React.Component { constructor(props) { super(props); this.state = {username: infoMap.nameZs}; // 初始化state } render() { return ( <form> <label>{infoMap.nameInfo}</label> <input type="text" name="name" value={this.state.username}></input> <input type="submit" value={infoMap.submitInfo}></input> </form> ) }}// 绑定按钮事件class FormTwoComp extends React.Component { constructor(props) { super(props); this.state = {username: infoMap.nameZs}; // 初始化state this.handleChange = this.handleChange.bind(this); } handleChange(event) { let tempUserName = event.target.value; this.setState({username: tempUserName}) alert(infoMap.nameChangeInfo + tempUserName + infoMap.nameChangeEnd); // 弹出提示框 } render() { return( <form> <label>{infoMap.nameInfo}</label> <input type="text" name="name" value={this.state.username} onChange={this.handleChange}></input> <input type="submit" value={infoMap.submitInfo}></input> </form> ) }}class FormThreeComp extends React.Component { constructor(props){ super(props); this.state = {firstName: ''}; this.handleFirstNameChange = this.handleFirstNameChange.bind(this); } handleFirstNameChange(event) { let targetValue = event.target.value; let targetValueUpper = targetValue.toUpperCase(); this.setState({firstName: targetValueUpper}); alert(infoMap.nameChangeInfoBegin+ targetValue + infoMap.nameChangeInfoBegin + infoMap.nameChangeInfo + targetValueUpper + infoMap.nameChangeEnd); } render(){ return ( <form> <input type="text" value={this.state.firstName} onChange={this.handleFirstNameChange}></input> </form> ) }}class FormFourComp extends React.Component { constructor(props){ super(props); this.state = { tel: '', info: '13644552233' }; this.handleTelChange = this.handleTelChange.bind(this); } handleTelChange(event) { // 使用正则表达式校验手机号 let telReg = /13[0-9]\d{8}|18[56789]\d{8}/g; let targetTel = event.target.value; let finalTel = targetTel; if (targetTel.length < 11) { this.setState({info: '手机号码长度不足11位'}); } else if (targetTel.length == 11){ if (telReg.test(targetTel)) { this.setState({info: '手机号码格式正确'}); finalTel = targetTel; } else { this.setState({info: '手机号码格式错误'}); finalTel = ''; } } else { finalTel = targetTel.substr(0, 11); } this.setState({tel: finalTel}); } render(){ return ( <form> <input type="text" name="tel" value={this.state.tel} onChange={this.handleTelChange}></input> <input type="text" name="info"Name="css-input-info" value={this.state.info} readOnly></input> <input type="submit" value="重置"></input> </form> ); }}class FormFiveComp extends React.Component { constructor(props){ super(props); this.state = { sn: '' }; this.handleSNChange = this.handleSNChange.bind(this); } handleSNChange(event) { let targetSN = event.target.value; let finalSN = targetSN; if (targetSN.length > 11) { finalSN = targetSN.substr(0, 11); } else { if (targetSN.length == 3) { finalSN = targetSN + '-'; } else if (targetSN.length == 7) { finalSN = targetSN + '-'; } } this.setState({sn: finalSN}); } render(){ return ( <form> <input type="text" name="sn" value={this.state.sn} onChange={this.handleSNChange}></input> <input type="submit" value="重置"></input> </form> ); }}class FormSixComp extends React.Component { constructor(props){ super(props); this.state = { keyword: '' } this.handleArticleChange = this.handleArticleChange.bind(this); } handleArticleChange(event) { let regexpKeyword = /^sking\s/g; let targetKeyword = event.target.value; let markdownKeyword = targetKeyword; if (regexpKeyword.test(targetKeyword)) { markdownKeyword = targetKeyword.replace(regexpKeyword, 'KING '); } this.setState({keyword: markdownKeyword}); } render(){ return ( <form> <textarea type="text" name="article" value={this.state.keyword} onChange={this.handleArticleChange}></textarea> <input type="submit" value="提交"></input> </form> ); }}class FormSevenComp extends React.Component { constructor(props){ super(props); this.state = { selval: 'football' }; this.handleSelChange = this.handleSelChange.bind(this); } handleSelChange(event) { let setVal = event.target.value; console.log("你选择的是：'" + setVal + "'."); this.setState({selval: setVal}); } render(){ return ( <form> <label>请选择您喜欢的运动： <select value={this.state.selval} onChange={this.handleSelChange}> <object value="baseball">棒球</object> <option value="football">足球</option> <option value="basketball">篮球</option> </select> </label> <input type="submit" value="提交"></input> </form> ); }}class FormEightComp extends React.Component { constructor(props){ super(props); this.state = { isOnOff: true, username: 'king' }; } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); console.log(name + " : " + value); } render(){ return ( <form> <lable> On/Off: <input type="checkbox" name="isOnOff" checked={this.state.isOnOff} onChange={this.handleInputChange}></input> </lable> <br/> <label> 用户名: <input type="text" name="username" value={this.state.username} onChange={this.handleInputChange}></input> </label> </form> ) }}class FormNineComp extends React.Component { constructor(props){ super(props); this.state = { username: '', age: "18", gender: "male", }; this.handleInputChange = this.handleInputChange.bind(this); this.handleSelChange = this.handleSelChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } handleSelChange(event) { let gender = event.target.value; this.setState({gender: gender}); } handleSubmit(event) { event.preventDefault(); console.log("Username:" + this.state.username); console.log("Age：" + this.state.age); console.log("Gender:" + this.state.gender); } render(){ return( <form onSubmit={this.handleSubmit}> <label> 用户名： <input type="text" name="username" value={this.state.username} onChange={this.handleInputChange}></input> </label><br/> <label> 年龄： <input type="text" name="age" value={this.state.age} onChange={this.handleInputChange}></input> </label><br/> <label> 性别： <select name="gender" value={this.state.gender} onChange={this.handleSelChange}> <option value="male">Male</option> <option value="female">Female</option> </select> </label><br/><br/> <input type="submit" value="提交"></input> </form> ); }}const FormExample = () => { return ( <span> <h2>Form简单示例</h2> <hr/> <div>使用state</div> <FormComp/> <hr/> <div>组件</div> <FormTwoComp/> <hr/> <div>字母大写(小写会变成大写)</div> <FormThreeComp/> <hr/> <div>手机号码校验</div> <FormFourComp/> <hr/> <div>格式化序列号</div> <FormFiveComp/> <hr/> <div>多行输入(Textare)</div> <FormSixComp/> <hr/> <div>选择(Select)标签</div> <FormSevenComp/> <hr/> <div>Multi Input标签</div> <FormEightComp/> <hr/> <div>Submit标签</div> <FormNineComp/> </span> )}export default FormExample;