大家好，谢谢您今后的回答。 我已经麻烦了好几天，我只想删除由表单生成的数组的索引，但是我做不到... 这是我的代码： 要删除：
handleDelete(index) {
const recipients = this.state.recipients;
recipients.splice(index, 1);
this.setState({recipients: recipients})
}
用于推送索引和渲染：
class SendBookPass extends React.Component {
constructor(props) {
super(props);
this.addNewBeneficiary = this.addNewBeneficiary.bind(this);
this.toggleBeneficiaryInfos = this.toggleBeneficiaryInfos.bind(this);
this.state = {
orderId: "qsdp$az546",
territory_level: "departement",
indexForm: 0,
recipients: [
{
name: "",
firstname: "",
address: "",
additionalAddress: "",
zip: "",
city: "",
numberPassBook: 1,
}
],
export_mode: {
verbose:true
},
expanded: false,
};
}
addNewBeneficiary() {
let editedForm = this.state.recipients;
editedForm.push({
name: "",
firstname: "",
address: "",
additionalAddress: "",
zip: "",
city: "",
numberPassBook: 1,
});
this.setState({
recipients: editedForm,
indexForm: editedForm.length - 1,
});
console.log("editedForm", editedForm);
}
toggleBeneficiaryInfos() {
this.setState({
expanded: !this.state.expanded,
});
}
handleUpdate(newForm) {
}
handleDelete(index) {
const recipients = this.state.recipients;
recipients.splice(index, 1);
this.setState({recipients: recipients})
console.log(recipients);
}
handleSubmit() {
// API
};
render() {
const {
indexForm,
recipients
} = this.state;
const { t } = this.props;
return (
<>
<div className="sendPass">
<h1>{t('SEND_PASS')}</h1>
<form
className='sendPassForm'
onSubmit={this.handleSubmit()}
>
<SendPassFormRender infos={recipients[indexForm]} onUpdate={this.handleUpdate} />
<div className="addBeneficiary" onClick={() => this.addNewBeneficiary()}>
<svg data-name="Layer 1" viewBox="0 0 48 60" x="0px" y="0px" >
<path d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm0,36A17,17,0,1,1,41,24,17,17,0,0,1,24,41Z"/>
<polygon points="25 14 23 14 23 23 14 23 14 25 23 25 23 34 25 34 25 25 34 25 34 23 25 23 25 14"/>
</svg>
<p>{t('ADD_BENEFICIARY')}</p>
</div>
{console.log("indexform", indexForm)}
{indexForm === 0
? ""
: recipients.map((infos, index) =>
<div key={index} className="listBeneficiary">
{console.log("indexform de",infos)}
<p>{infos.name}</p>
<p>{infos.firstname}</p>
<p>{infos.city}</p>
<div onClick={this.handleDelete.bind(this, index)}>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 125" >
<path d="M77.4,29.4c-1.7,0-3.2,1.4-3.2,3.2v51.4c0,2.5-2.1,4.6-4.6,4.6H30.5c-2.5,0-4.6-2.1-4.6-4.6V32.5c0-1.7-1.4-3.2-3.2-3.2 c-1.7,0-3.2,1.4-3.2,3.2v51.4c0,6,4.9,10.9,10.9,10.9h39.1c6,0,10.9-4.9,10.9-10.9V32.5C80.5,30.8,79.1,29.4,77.4,29.4z"/><path d="M53,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S53,80.5,53,78.7z"/><path d="M40,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S40,80.5,40,78.7z"/>
<path d="M66,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S66,80.5,66,78.7z"/>
<path d="M84.2,17H15.8c-1.7,0-3.2,1.3-3.2,3s1.4,3,3.2,3h68.3c1.7,0,3.2-1.3,3.2-3S85.9,17,84.2,17z"/>
<path d="M40.9,11h18.2c1.7,0,3.2-1.3,3.2-3s-1.4-3-3.2-3H40.9c-1.7,0-3.2,1.3-3.2,3S39.1,11,40.9,11z"/>
</svg>
</div>
<BeneficiaryInfos
address={infos.address}
additionalAddress={infos.additionalAddress}
zip={infos.zip}
/>
</div>
)}
<input
type="submit"
value={t('SEND')}
/>
</form>
</div>
</>
);
}
}
export default withTranslation('common')(SendBookPass);
对于FormRender：
class FormSendPass extends React.Component {
handleChange = (e, key) => {
this.props.infos[key] = e.target.value;
this.props.onUpdate(this.props.infos)
};
componentDidUpdate(prevProps) {
if (prevProps.infos!== this.props.infos) {
const name = document.getElementById("name");
const firstname = document.getElementById("firstname");
const address = document.getElementById("address");
const additionalAddress = document.getElementById("additionalAddress");
const zip = document.getElementById("zip");
const city = document.getElementById("city");
if(this.props.infos && this.props.infos.name) {
name.value = this.props.infos.name
} else {
name.value = ""
}
if(this.props.infos && this.props.infos.firstname === undefined) {
firstname.value = this.props.infos.firstname
} else {
firstname.value = ""
}
if(this.props.infos && this.props.infos.address === undefined) {
address.value = this.props.infos.address
} else {
address.value = ""
}
if(this.props.infos && this.props.infos.additionalAddress === undefined) {
additionalAddress.value = this.props.infos.additionalAddress
} else {
additionalAddress.value = ""
}
if(this.props.infos && this.props.infos.zip === undefined) {
zip.value = this.props.infos.zip
} else {
zip.value = ""
}
if(this.props.infos && this.props.infos.city === undefined) {
city.value = this.props.infos.city
} else {
city.value = ""
}
} else {
return ""
}
}
render() {
const { t } = this.props;
return (
<>
<div className='userPassForm'>
<label>
{t('NAME')}*
<input
id="name"
type='text'
onChange={e => this.handleChange(e, "name")}
/>
</label>
<label>
{t('FIRST_NAME')}*
<input
id="firstname"
type='text'
onChange={e => this.handleChange(e, "firstname")}
/>
</label>
</div>
<div className='addressPassForm'>
<label>
{t('ADDRESS')}*
<input
id="address"
type='text'
onChange={e => this.handleChange(e, "address")}
/>
</label>
<label>
{t('ADDITIONAL_ADDRESS')}
<input
id="additionalAddress"
type='text'
onChange={e => this.handleChange(e, "additionalAddress")}
/>
</label>
</div>
<div className='cityUserPassForm'>
<label>
{t('ZIP')}*
<input
id="zip"
type='float'
onChange={e => this.handleChange(e, "zip")}
/>
</label>
<label>
{t('CITY')}*
<input
id="city"
type='text'
onChange={e => this.handleChange(e, "city")}
/>
</label>
</div>
<div className='numberSubmitPassForm'>
<label>
{t('PASS_BOOK')}
<input
type='number'
disabled={true}
value='1'
/>
</label>
</div>
<p>*{t('REQUIRED_FIELDS')}</p>
</>
);
}
}
export default (FormSendPass);
我认为将数据推送到表中的方法不正确，并且阻止了我删除数据。放置空白不是解决方案，但我不知道该怎么做。如果有人有主意。
答案 0 :(得分：0)
尝试使用过滤器方法，比较索引，过滤未获取传递的索引参数的所有元素
handleDelete(index) {
this.setState({
recipients: this.state.recipients.filter((x, i) => i !== index
})
}