react动态增加input框20180828
react动态增加input框20180828
- 先在render里写好渲染的方法和点击的方法：
二、点击的时候，先获取“记录新建或减少的描述字段的限制个数的数组”和“储存新增描述字段的input框的输入值数组”，若在限制个数之内，则同时给两者增加一个空元素
- 渲染的时候，会根据限制个数的数组长度来return多少个input框，同时，显示的value值也是根据第几个i和储存值的数组的下标来匹配一一对应
- 输入值改变的时候，先获取到第几个值发生了改变，然后直接改变对应下标的储存数组的值
五、点击删除的时候，先得到是点击了第几个删除，然后将对应的记录第几个input框和对应下标的储存输入框的值的元素同时删掉，这样就能保证第i个input框还是对应第i个值，并且删掉的input框后的input框和它的值都往前移一位
| import React from 'react' import { connect } from 'react-redux' // import Table from './Table' import { dispatch } from '@tencent/tcff-core' // import ActionPanel from './ActionPanel'
import { Button, Dialog, SearchBox, Pager, DropdownList, Tip, Input } from '@tencent/bere' import './app.css' // 实现路由跳转，1.先引入withRouter import {withRouter} from "react-router-dom";
class create_userStore extends React.Component {
constructor(props) { super(props) this.state = { // 人员库名称值 create_name_input: '', // 备注值 create_remarks_input: '', // 人员库名称是否超过20个字符，超过就显示并加上is-error字体泛红，twenty_over_none表示隐藏 twenty_over: 'twenty_over', twenty_over_remarks: 'twenty_over_remarks', // 记录新建或减少的描述字段的个数，最多只能5个 create_list: [], // 储存新增描述字段的input框的输入值 tempValue: [], } // 输入框改变值的方法绑定this this.handleChange = this.handleChange.bind(this); }
componentDidMount() { // 页面加载完就应该去请求数据 // dispatch({ // type: 'userStore_manage_model/fetch', // payload: { // limit: 10, // need_count: true, // offset: 0 // } // }) }
componentWillMount() { // dispatch({ // type: 'task/stopPolling' // }) }
// 点击了新建人员库的返回或者是点击了新建人员库的取消而返回人员库管理页面，push是push‘#’号之后的路径 create_back() { this.props.history.push('/userStore_manage') }
// 点击了创建人员库成功后的弹框的我知道按钮 create_success() { this.props.history.push('/userStore_manage') }
ofterSet() { // console.log('afterSet里面的this.state.create_number=', this.state.create_number) }
// 点击了新增一条描述字段 new_one(e) { e.preventDefault();// 阻止默认的跳转行为 // console.log('点击了新增一条描述字段', 'e.target=', e.target, 'this=', this, 'this.state.create_number=', this.state.create_number) let create_list = this.state.create_list; let tempValue = this.state.tempValue; // setState使用回调函数，保证函数里面的语句是在set完state的值之后执行的，而下面的create_number取到的是set之前的值，回调函数里取到的是set之后的值，因为setState不能保证同步 if( create_list.length < 5 ){ console.log('修改前tempValue.length=', tempValue.length, 'tempValue=', tempValue, 'create_list.length=', create_list.length,'create_list=', create_list, 'this.state=', this.state) // tempValue.push(''); // create_list.push(''); this.setState(state => { // let tempValue = state.tempValue.splice(temp_index, 1, temp_value); state.tempValue.push(''); state.create_list.push(''); // state.tempValue[temp_index] = temp_value; return state; });
console.log('修改后tempValue.length=', tempValue.length, 'tempValue=', tempValue, 'create_list.length=', create_list.length, 'create_list=', create_list, 'this.state=', this.state) // this.setState({ // create_number: create_number + 1 // }, this.ofterSet) } } // 点击删除一条描述字段 del_one(e){ e.preventDefault();// 阻止默认的跳转行为
let temp_index = e.target.getAttribute('data-index'); let temp_value = e.target.value; console.log('点击删除的e.target=', e.target, 'temp_index=', temp_index) // e.target.remove();
let create_list = this.state.create_list; let tempValue = this.state.tempValue; if( 0 < create_list.length < 5 ){ this.setState(state => { state.create_list.splice(temp_index, 1); state.tempValue.splice(temp_index, 1); return state; }); } }
// 点击了新增人员库的确定，直接发请求过去看有没有那个描述字段重复的 create_ok() { // 获取新增描述字段的input输入值 let tempValue = this.state.tempValue; dispatch({ type: 'create_userStore_model/create', payload: { tempValue: tempValue, history: this.props.history } }) }
// 新增描述字段后input框的输入值发生了改变 handleChange(e){ let temp_index = e.target.getAttribute('data-index'); let temp_value = e.target.value; // console.log('temp_index=', temp_index, '修改前this.state.tempValue=', this.state.tempValue, 'this.state.tempValue[temp_index]=', this.state.tempValue[temp_index], 'e.target.value=', e.target.value);
// this.setState({ // create_number: create_number + 1 // }, this.ofterSet)
// if(this.state.tempValue[temp_index] === undefined){ // 实现根据下标动态修改state对应的属性 this.setState(state => { // let tempValue = state.tempValue.splice(temp_index, 1, temp_value); state.tempValue.splice(temp_index, 1, temp_value); // state.tempValue[temp_index] = temp_value; return state; }); // this.setState({ // state : state // }) // }
console.log('修改后this.state=', this.state, '修改后this.state.tempValue=', this.state.tempValue); }
// 渲染执行新增的描述字段 li_create(e){ const doms = []; for (var i = 0; i < this.state.create_list.length; i++) { doms.push( <li className="pure-text-row create_li" key={i} > <div className="form-label "> <label className="form-label_text " htmlFor="">描述字段{ i + 1 }label> div> <div className="form-input"> <div className="form-unit">
<Input data-index={i} className='create_description_input' placeholder="测试" value={this.state.tempValue[i]} onChange={(e)=>{this.handleChange(e)}} /> <a className="text-vm ml-10" data-index={i} onClick={this.del_one.bind(this)} href="">删除a> {/* */} div> div> li>
)
}
return doms;
}
render() { const { tempValue } = this.state console.log('描述字段输入框的值tempValue=', tempValue)
return ( <div>
<div className="manage-area"> <div className="manage-area-title secondary-title"> {/* */} {/* 使用箭头函数绑定this，箭头函数则会捕获其所在上下文的this值，作为自己的this值 */} <span onClick={()=>{this.create_back()}}> <i className="btn-back-icon">i>返回 span> <span className="line-icon">|span> <h2>新建人员库h2> div>
<div className="manage-area-main create_userStore">
<Tip> 如有疑问可参阅帮助文档，业务描述。。。。。。 <a href='www.baidu.com'>查看详情a> <b className="external-link-icon">b> Tip>
<div className="tc-panel create_userStore_basic"> <div className="tc-panel-bd"> <div className="param-box"> <div className="param-hd"> <h3>基本信息h3> div> <div className="param-bd"> <ul className="form-list fixed-layout personnel-form-list"> <li className="pure-text-row"> <div className="form-label "> <label className="form-label_text " htmlFor="">人员库名称label> div> <div className="form-input"> {/* <div className= 'form-unit'> {/**/} <Input className='create_name_input' placeholder="" onChange={e => { this.setState({ create_name_input: e.target.value}); if(e.target.value.length > 20){ this.setState({ twenty_over: 'form-input-help'}); }else{ this.setState({ twenty_over: 'twenty_over'}); } }} value={this.state.create_name_input} /> {/* 不超过20个字，支持中英文/数字/- <p className= {this.state.twenty_over}>必填，不超过20个字，支持中英文/数字/-p> div> div> li> <li className="pure-text-row"> <div className="form-label "> <label className="form-label_text " htmlFor="">备注（选填）label> div> <div className="form-input"> <div className="form-unit"> {/**/} <Input className='create_remarks_input' placeholder="" onChange={e => { this.setState({ create_remarks_input: e.target.value}) if(e.target.value.length > 20){ this.setState({ twenty_over_remarks: 'form-input-help_remarks'}); }else{ this.setState({ twenty_over_remarks: 'twenty_over_remarks'}); } }} value={this.state.create_remarks_input} /> <p className= {this.state.twenty_over_remarks}>不超过20个字，支持中英文/数字/-p> div> div> li> ul> div> div> <div className="param-box"> <div className="param-hd"> <h3> 描述字段 <div className="tc-15-bubble-icon tc-15-triangle-align-start"> <i className="tc-icon icon-what">i> <div className="tc-15-bubble tc-15-bubble-top"> <div className="tc-15-bubble-inner"> <p>描述字段用于描述人员具体信息，如组织架构职位，可在设备管理中配置，用于终端pad显示； 描述字段新建完成后不可变更。p> div> div> div> h3> div> <div className="param-bd"> <ul className="form-list fixed-layout personnel-form-list"> {/* 点击新增或删除动态渲染描述字段输入框 */} {this.li_create()} ul> {/* 要绑定this */} <p className="form-input-help" onClick={this.new_one.bind(this)}><a href="">增加一条a>p> div> div> div> <div className="tc-panel-ft"> <Button className="tc-15-btn" onClick={this.create_ok.bind(this)}>确定Button> <Button className="tc-15-btn weak" onClick={() => {this.create_back()}}>取消Button> div> div> div> div> {/*弹框提示创建人员库成功*/} <div> <Dialog title="人员库创建成功" visible={this.props.success_visible} // okText="确认" cancelText="我知道了" // 不显示确定按钮 confirming={false} // onOk={() => {this.del_ok(false)}} onCancel={() => {this.create_success(false)}} > 您可以在人员库管理处对人员信息进行管理。 Dialog> div> div> ) } } // 先获取model里面的perPageCount每页显示的条数 const mapStateToProps = ({ create_userStore_model }) => { return { // loading: state.loading.flows['Device_info_model/fetch_info'] success_visible: create_userStore_model.success_visible } } // 实现路由跳转，2.使用withRouter() export default withRouter(connect(mapStateToProps)(create_userStore)) |