React Js Setstate不更新对象数组的输入值 代码下面有帮助吗？
更新只是状态我想进行动态表单编辑。 我正确地获取数据setstate但是对象数组中的输入值没有更新。
class IncorporationForm extends React.Component {
constructor(props) {
super(props);
this.initialValue = this.props.value;
this.state = {
formtitle:'',
outdate: '',
person: '',
returndate: '',
username: '',
shareholders: [{
result: 'deneme', meetingnotes: '', email: '', companyname: '', purpose: '', contactname: '', id: '',
files: [{
Fileorjname: '',
Filesysname: '',
Filetype: '',
Fileext: '',
Filepath: '',
Filesize:''
}]
}]
};
}
componentWillReceiveProps = (nextProps) => {
this.initialValue = nextProps.value;
this.setState({ value: nextProps.value });
};
componentWillMount = () => {
fetch(`/Form/MeetingFormDetailGetService?formidno=` + window.formid)
.then(response => response.json())
.then(function (data) {
this.getData(data)
}.bind(this))
this._initDatePicker();
}
getData = (data) => {
for (var i = 0; i < data.Shareholders.length - 1; i++) {
this.setState({ shareholders: this.state.shareholders.concat([{ result: 'test mest', meetingnotes: '', email: '', companyname: '', purpose: '', contactname: '', id: '' }]) });
}
let idx = 1
const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
if (idx !== sidx) return shareholder;
return { ...shareholder, companyname: "hoop hoop" };
});
this.setState({
outdate: moment(data.outdate).format("DD-MM-YYYY hh:mm"),
formtitle: data.formtitle,
person: data.person,
returndate: moment(data.returndate).format("DD-MM-YYYY hh:mm"),
shareholders: newShareholders
})
console.log("state")
console.log(this.state)
;
}
_initDatePicker = () => {
var $this = this;
var gidis = this.refs.gidis;
var donus = this.refs.donus;
var currentDate = new Date();
$(gidis).datetimepicker({
locale: 'tr'
}).on("dp.change", function (e) {
this.handledate(e.currentTarget.value, "outdate" )
}.bind(this));
$(donus).datetimepicker({
locale: 'tr'
}).on("dp.change", function (e) {
this.handledate(e.currentTarget.value, "returndate")
}.bind(this));
}
handledate = (val,name) => {
this.setState({ [name]: val });
}
handleUser = () => {
fetch("User/GetUserName")
.then(result => result.json())
.then(items => this.setState({ items }))
}
_updateDate = (evt) => {
console.log("new value ", this.refs.input.value);
}
_destroyDatePicker = (evt) =>{
var element = this.refs.input;
$(element).datetimepicker('destroy');
}
componentDidMount = (evt) => {
}
componentDidUpdate = (evt) => {
this._initDatePicker();
}
componentWillUnmount = (evt) =>{
this._destroyDatePicker();
}
handleNameChange = (evt) =>{
const target = evt.target.getAttribute('name')
const idno = evt.target.getAttribute('id')
this.setState({ [target]: evt.target.value });
let idx = 1
const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
if (idx !== sidx) return shareholder;
return { ...shareholder, companyname: "hoop hoop" };
});
this.setState({ shareholders: newShareholders });
update();
}
readFile = (evt) => {
var data = new FormData();
const idno = evt.target.getAttribute('id')
console.log(idno)
for (var i = 0; i < evt.target.files.length; i++) {
data.append("files", evt.target.files[i])
}
fetch("Form/UploadFile", {
mode: 'no-cors',
method: "POST",
body: data
}).then(function (res) {
if (res.ok) {
console.log("Perfect! ");
} else if (res.status == 401) {
console.log("Oops! ");
}
}, function (e) {
alert("Error submitting form!");
});
}
getUrlParameter = (name) => {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
handleShareholderNameChange = (idx) => (evt) => {
let isimler = null;
if (evt.target.files) {
var data = new FormData();
var fileresultdata;
for (var i = 0; i < evt.target.files.length; i++) {
data.append("files", evt.target.files[i])
}
fetch("Form/UploadFile", {
mode: 'no-cors',
method: "POST",
body: data
}).then((resp) => {
return resp.json()
// return myData;
}).then((data) => {
var isimler = [];
for (var i = 0; i < data.length; i++) {
isimler.push({
Fileorjname: data[i].Fileorjname,
Filesystemname: data[i].Filesystemname,
Filetype: data[i].Filetype,
Fileext: data[i].Fileext,
Filepath: data[i].Filepath,
Filesize: data[i].Filesize
});
}
const idno = 5;
console.log(data)
const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
if (idx !== sidx) return shareholder;
return {
...shareholder, files: isimler, id: idno
};
});
this.setState({ shareholders: newShareholders });
})
.catch(function (error) {
console.log(error);
});
} else {
const target = evt.target.getAttribute('name')
const idno = evt.target.getAttribute('id')
const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
if (idx !== sidx) return shareholder;
return {
...shareholder, [target]: evt.target.value, id: idno
};
});
this.setState({ shareholders: newShareholders });
}
console.log(this.state)
}
handleSubmit = (evt) => {
evt.preventDefault();
this.setState({ username: window.myVal });
setTimeout(function () {
fetch('Form/MeetingFormHandle', {
method: 'POST',
mode: 'CORS',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json',
'pragma': 'no-cache',
'cache-control': 'no-cache'
}
}).then(res => {
return res;
}).catch(err => err);
}.bind(this), 300);
}
handleAddShareholder = (evt) => {
evt.preventDefault();
this.setState({ shareholders: this.state.shareholders.concat([{ result: '', meetingnotes: '', email: '', companyname: '', purpose: '', contactname: '', id: '' }]) });
}
handleRemoveShareholder = (idx) => () => {
this.setState({ shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx) });
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h2 className="form-big-title">Seyahat / Toplantı Formu</h2>
<div className="row round-box-form">
<div className="col-md-3">
<h3 className="form-label-1">Form Başlığı</h3>
<input type="text" className="form-control" value={this.state.formtitle} name="formtitle" onChange={this.handleNameChange.bind(this)} />
</div>
<div className="col-md-3">
<h3 className="form-label-1">Kişiler</h3>
<input type="text" className="form-control" name="person" value={this.state.person} onChange={this.handleNameChange.bind(this)} />
</div>
<div className="col-md-3">
<h3 className="form-label-1">Giriş Tarihi ve Saati</h3>
<input ref="gidis" type="text" id="gidis-date" name="outdate" value={this.state.outdate} className="form-control" onClick={this.handleNameChange.bind(this)}/>
</div>
<div className="col-md-3">
<h3 className="form-label-1">Çıkış Tarihi ve Saati</h3>
<input ref="donus" type="text" className="form-control" name="returndate" value={this.state.returndate} onClick={this.handleNameChange.bind(this)}/>
</div>
</div>
<h2 className="form-mid-title">Görüşme Detayları</h2>
{this.state.shareholders.map((shareholder, idx) => (
<div className="shareholder">
<div className="row round-box-form">
<div onClick={this.handleRemoveShareholder(idx)} className="form-item-close-cont"><img src="/content/images/close-form-02.png" /></div>
<div className="col-md-12">
<h3 className="form-label-1">Toplantı Amacı</h3>
<input
type="text"
name="purpose"
id={`${idx + 1} `}
defaultValue={ "test mest"}
value={shareholder.purpose}
onChange={this.handleShareholderNameChange(idx)}
className="form-control" />
</div>
<br />
<div className="col-md-3">
<h3 className="form-label-1">Şirket Adı</h3>
<input
type="text"
name="companyname"
id={`${idx + 1} `}
value={this.companyname}
onChange={this.handleShareholderNameChange(idx)}
className="form-control" />
</div>
<div className="col-md-3">
<h3 className="form-label-1">Görüşülen Kişi</h3>
<input
type="text"
name="contactname"
id={`${idx + 1} `}
value={this.state.shareholders.contactname}
onChange={this.handleShareholderNameChange(idx)}
className="form-control" />
</div>
<div className="col-md-3">
<h3 className="form-label-1">E-mail Adresi</h3>
<input type="text" className="form-control"
name="email"
id={`${idx + 1} `}
value={this.state.shareholders.email}
onChange={this.handleShareholderNameChange(idx)}
/>
</div>
<div className="col-md-3">
<h3 className="form-label-1">Kartvizit Fotoğrafı & Dökümanlar</h3>
<input
type="file"
name="files"
id={`${idx + 1} `}
onChange={this.handleShareholderNameChange(idx)}
className="form-control" multiple />
</div>
<div className="col-md-6">
<h3 className="form-label-1">Toplantı Notları</h3>
<textarea
type="text"
name="meetingnotes"
id={`${idx + 1} `}
value={this.state.shareholders.meetingnotes}
onChange={this.handleShareholderNameChange(idx)}
rows="4"
className="form-control inputdata">
</textarea>
</div>
<div className="col-md-6">
<h3 className="form-label-1">Sonuç</h3>
<textarea className="form-control inputdata"
name="result"
id={`${idx + 1} `}
value={this.state.shareholders.result}
onChange={this.handleShareholderNameChange(idx)}
rows="4" ></textarea>
</div>
<br />
</div>
</div>
))}
<div className="row">
<a onClick={this.handleSubmit} className="save-btn" href="">Kaydet</a>
<a onClick={this.handleAddShareholder} className="add-btn" id="add-meeting" href="">Görüşme Ekle</a>
</div>
</form>
)
}
}
ReactDOM.render(<IncorporationForm />, document.getElementById('seyForm'));