我有3个更新文本字段，其值来自称为edit_obj的状态，如下所示：
<input type="text" noValidate name="uname_edit" value={this.state.edit_obj.username} onChange={e => this.editchangeHandler(e)} />
当我单击“编辑”按钮时，editClick函数可以像下面这样设置edit_obj的值：
this.setState({edit_obj: editval})
我附上完整的代码。请让我知道如何编辑文本字段中的值
import React from 'react';
import {FromErrors1} from './formErrors';
import { SlowBuffer } from 'buffer';
class Form extends React.Component{
constructor(props){
super(props);
this.state={
uname: '',
pass: '',
address:'',
salary:'',
addFormValues:{
username:'',
password:'',
address:''
},
errorfields:{
uname_err:'',
pass_err:'',
address_err:'',
salary_err:'',
valid_user:false,
valid_pass:false,
valid_address:false,
valid_salary:false,
},
delete_data:[],
edit_showui:false,
edit_obj:{},
editval:{},
edit_data:[],
editted_uname:''
}
this.changeHandler= this.changeHandler.bind(this)
this.pushAddStudentData=new Array()
this.submitForm= this.submitForm.bind(this);
//this.editchangeHandler = this.editchangeHandler.bind(this)
//this.editClick = this.editClick.bind(this)
}
editClick =(that,editval) =>{
//alert("du")
//show edit ui:
this.setState({edit_showui:true});
//add values to the inputs of show ui
console.log('editval: ',editval);
//this.setState({edit_obj:editval});
//this.setState({edit_data:this.state.edit_data.push(editval)});
/*this.setState((state)=>({
edit_data:state.edit_data.push(editval)
}))*/
this.state.edit_data=[]
this.setState(prevState => ({
edit_data: [...prevState.edit_data, editval]
}))
this.setState({edit_obj: editval})
console.log("edit_obj:::::::",this.state.edit_obj)
}
editchangeHandler = (e) =>{
console.log('ename::',e.target.name)
console.log('etarget::',e.target.value)
//this.setState({[e.target.name]:e.target.value})
console.log('edit_obj::',this.state.edit_obj)
//newEditVal
//this.state.newEditVal.username =
/*
if(e.target.name=='uname_edit'){
console.log('uname_edit')
//editted_uname
this.setState(
{editted_uname : ''}
)
console.log('editted_uname::',this.state.editted_uname)
}
if(e.target.name=='pass_edit'){
console.log('pass_edit')
}
if(e.target.name=='address_edit'){
console.log('address_edit')
}
*/
//this.setState({})
this.setState({
[e.target.name]: e.target.value
});
}
updateval=()=>{
console.log('EDIT_OBJ: ',this.state.edit_obj)
}
deleteClick =(e,f) =>{
console.log("sefr",e,'a::',f);
// if(this.pushAddStudentData.indexOf(f) > -1){
// }
let finaldeleteddata=[];
for( var i = 0; i < this.state.delete_data.length; i++){
console.log('this.state.delete_data[i]===f:: ',this.state.delete_data[i]===f)
console.log('and f:: ',f)
if ( this.state.delete_data[i] === f) {
this.state.delete_data.splice(i, 1);
// this.setState(
// {
// delete_data:finaldeleteddata
// }
// )
this.setState(prevState => ({
delete_data: [...prevState.delete_data]
}))
}
console.log('YEYEYEYEEDITDATATAa:: ',this.state.delete_data)
console.log("finaldeleteddata:: ",finaldeleteddata)
}
}
changeHandler = (ev) =>{
// alert("gugugu")
this.setState({[ev.target.name]:ev.target.value})
console.log(this.state)
}
submitForm = (e) =>{
let finaladdeddata;
e.preventDefault();
console.log('this.state.uname:',this.state.uname);
console.log('this.state.pass:',this.state.pass);
let usererror = {...this.state.errorfields};
var regex_username = new RegExp(/^[a-zA-Z ]*$/);
if(this.state.uname && regex_username.test(this.state.uname)){
//no error
// this.state.valid_user= true; /THIS IS NOT RIGHT WAY, USE THIS.SETSTATE
alert("iffff");
usererror.uname_err='';
usererror.valid_user = true
console.log("usererror::",usererror)
console.log("this.STATEuserif:::",this.state.errorfields.valid_user)
this.setState({errorfields: usererror});
}else{
//else of user
alert('2user')
console.log('usererror: ',usererror)
usererror.uname_err= 'username not valid';
usererror.valid_user = false;
this.setState({errorfields: usererror});
//there is error
console.log("this.STATEuserelse:::",this.state)
}
if(this.state.pass && this.state.pass.length <=6){
//if of pass
//no error
// this.state.valid_pass= true;
usererror.valid_pass=true;
usererror.pass_err='';
this.setState({errorfields:usererror})
console.log("this.STATEpassif:::",this.state)
}else{
//else of pass
alert('2pass')
usererror.valid_pass=false;
usererror.pass_err='invalid password | password length more than 6';
this.setState({errorfields:usererror})
//there is error
console.log('this.state.errorfields',this.state.errorfields)
console.log("this.STATE2:::",this.state)
}
//usererror
//errorfields
console.log("address:", this.state.address)
console.log("salary:", this.state.salary)
//put error fields in address
if(this.state.address && this.state.address.length<=20){
// this.state.valid_address=true;
usererror.address_err='';
usererror.valid_address=true
this.setState({errorfields:usererror})
} else{
usererror.address_err='Empty address | address length more than 20';
usererror.valid_address=false
this.setState({errorfields:usererror})
}
/*form={}
uname: '',
pass: '',
address:''
}*/
console.log('usererror.valid_address',usererror.valid_address);
console.log('usererror.valid_pass',usererror.valid_pass);
console.log('usererror.valid_user',usererror.valid_user);
if(usererror.valid_address==true && usererror.valid_pass==true && usererror.valid_user==true){
alert("YESSS");
let addFormValues_dupl= {...this.state.addFormValues};
addFormValues_dupl.username = this.state.uname;
addFormValues_dupl.password = this.state.pass;
addFormValues_dupl.address = this.state.address;
console.log('addFormValues_dupl',addFormValues_dupl);
// this.pushAddStudentData.push(addFormValues_dupl)
//this.setState({delete_data:addFormValues_dupl})
this.state.delete_data.push(addFormValues_dupl)
console.log('state',this.state);
// this.setState({addFormValues: this.state.uname})
}else{
alert("NOOO")
//this.pushAddStudentData=[]
console.log('pushAddStudentDataELSE',this.pushAddStudentData[0]);
}
}
render(){
return(
<div>
<h2>Add Employee info</h2>
<div className="displayerrors">
{/* <ul>{this.state.errorfields.map((a,i)=>{<li>a</li>})}</ul> */}
<input type="hidden" value={this.state.errorfields}/>
<p>{this.state.errorfields.uname_err} - {this.state.errorfields.valid_user}</p>
<p>{this.state.errorfields.pass_err}</p>
<p>{this.state.errorfields.address_err}- {this.state.errorfields.valid_address}</p>
</div>
<div>
<label>username:</label>
<input type="text" noValidate name="uname" onChange={this.changeHandler}/>
</div>
<div>
<label>password:</label>
<input type="password" noValidate name="pass" onChange={this.changeHandler}/>
</div>
<div>
<label>address:</label>
<textarea noValidate name="address" onChange={this.changeHandler}></textarea>
</div>
<div>
<button onClick={this.submitForm}></button>
</div>
<div>{this.state.delete_data.length}
{this.state.delete_data.map((a,i)=>{
return <ul key={i}> <li>{i}</li><li>{a.username}</li>
<li>{a.password}</li>
<li>{a.address}</li>
<li><a href="#" onClick={()=>{this.deleteClick(this,a)}}>Delete</a></li>
<li><a href="#" onClick={()=>{this.editClick(this,a)}}>Edit</a></li></ul>
})}
</div>
{ this.state.edit_showui==true &&
<div>
<div>
<label>username:</label>
<input type="text" noValidate name="uname_edit" value={this.state.edit_obj.username} onChange={e => this.editchangeHandler(e)} />
</div>
<div>
<label>password:</label>
<input type="password" noValidate name="pass_edit" value={this.state.edit_obj.password} onChange={this.editchangeHandler.bind(this)} />
</div>
<div>
<label>address:</label>
<textarea noValidate name="address_edit" value={this.state.edit_obj.address} onChange={this.editchangeHandler.bind(this)}></textarea>
</div>
<div>
<button onClick={this.updateval.bind(this)}>update</button>
</div>
<div>{this.state.edit_obj.username}</div>
<div>{this.state.edit_obj.password}</div>
<div>{this.state.edit_obj.address}</div>
</div>
}
editdata:
<div>{this.state.edit_data.username}</div>
<div>{this.state.edit_data.password}</div>
<div>{this.state.edit_data.address}</div>
{this.state.edit_data.map((q,i)=>{
return <ul key={i}> <li>{i}</li><li>{q.username}</li>
<li>{q.password}</li>
<li>{q.address}</li>
</ul>
})}
}
</div>
)//return ends
}
}
export default Form;
提前谢谢。