Javascript 不更改表单的值
我有一个动态生成表单字段的表单。现在的问题是，并没有动态生成的字段正在获取输入，而那个些动态生成的字段并没有在字段中获取输入Javascript 不更改表单的值,javascript,reactjs,mobx-react-form,Javascript,Reactjs,Mobx React Form,我有一个动态生成表单字段的表单。现在的问题是，并没有动态生成的字段正在获取输入，而那个些动态生成的字段并没有在字段中获取输入name='name'和name='age'字段未获得输入，无法在其中插入数据。前两个字段“所有者”和“描述”工作正常 import React from "react"; class Form extends React.Component { state = { cats: [{ name: "", age: "" }], owner: "",
name='name'name='age'import React from "react";
class Form extends React.Component {
state = {
cats: [{ name: "", age: "" }],
owner: "",
description: ""
};
handleChange = e => {
alert('inot');
if (["name", "age"].includes(e.target.className)) {
let cats = [...this.state.cats];
cats[e.target.dataset.id][
e.target.className
] = e.target.value.toUpperCase();
this.setState({ cats }, () => console.log(this.state.cats));
} else {
this.setState({ [e.target.name]: e.target.value.toUpperCase() });
}
};
addCat = e => {
this.setState(prevState => ({
cats: [...prevState.cats, { name: "", age: "" }]
}));
};
handleSubmit = e => {
e.preventDefault();
};
handleClick = e => document.getElementById(e.target.id).remove();
// changeOption =(e) => {
// this.setState.cats(e.target.value);
// }
render() {
let { owner, description, cats } = this.state;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<div className='row mt-5'>
<div className='col-md-12 mb-5'>
<h3 className='text-center text-primary'>Create Products Option</h3>
</div>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor='name'>
<b>Owner</b>
</label>
<input
type='text'
className='form-control'
name='owner'
id='owner'
value={owner}
/>
</div>
<div className='col-md-3'>
<label htmlFor='description'>
<b>Description</b>
</label>
<input
type='text'
className='form-control'
name='description'
id='description'
value={description}
/>
<button
className='btn btn-success rounded-0 w-25 float-right mt-2 shadow-none'
onClick={this.addCat}
>
+
</button>
</div>
<div className='col-md-3'></div>
</div>
{cats.map((val, idx) => {
let catId = `cat-${idx}`,
ageId = `age-${idx}`;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<div id={ageId} key={idx}>
<div className='row mt-5'>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor={catId}>
<b>{`Cat #${idx + 1}`}</b>
</label>
<input
type='text'
name='name'
data-id={idx}
id={catId}
value={cats[idx].name}
className='name form-control'
/>
</div>
<div className='col-md-3'>
<label htmlFor={ageId}>
<b>Age</b>
</label>
<input
type='text'
name='age'
data-id={idx}
id={ageId}
value={cats[idx].age}
className='age form-control'
/>
<button
className='btn btn-success rounded-0 w-25 float-right mt-2 shadow-none'
onClick={this.addCat}
>
+
</button>
<input
type='button'
name={ageId}
data-id={idx}
id={ageId}
value={"-"}
className='age float-right mt-2 mr-3 btn btn-danger w-25 rounded-0 w-25 shadow-none'
onClick={this.handleClick}
/>
</div>
<div className='col-md-3'></div>
</div>
</div>
</form>
);
})}
<div className='row mt-3'>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor='name'>
<b>Min Selection</b>
</label>
<input
type='text'
className='form-control'
name='min'
id='min'
value={""}
/>
</div>
<div className='col-md-3'>
<label htmlFor='description'>
<b>Max Selection</b>
</label>
<input
type='text'
className='form-control'
name='max'
id='max'
value={""}
/>
<input
className='float-right btn btn-success mt-3'
type='submit'
value='Submit'
/>
{/* <button className="float-right" onClick={this.addCat}>Add new cat</button> */}
</div>
<div className='col-md-3'></div>
</div>
</form>
);
}
}
export default Form;
从“React”导入React；
类形式扩展了React.Component{
状态={
猫：[{姓名：，年龄：}]，
所有者：“，
说明：“”
};
handleChange=e=>{
警报（“inot”）；
if（[“名称”，“年龄”]。包括（例如target.className））{
让cats=[…this.state.cats]；
cats[e.target.dataset.id][
e、 target.className
]=e.target.value.toUpperCase（）；
this.setState（{cats}，（）=>console.log（this.state.cats））；
}否则{
this.setState（{[e.target.name]：e.target.value.toUpperCase（）}）；
}
};
addCat=e=>{
this.setState（prevState=>({
猫：[…prevState.cats，{姓名：，年龄：}]
}));
};
handleSubmit=e=>{
e、 预防默认值（）；
};
handleClick=e=>document.getElementById（e.target.id）.remove（）；
//changeOption=（e）=>{
//此.setState.cats（即目标值）；
// }
render（）{
让{owner，description，cats}=this.state；
返回(
创建产品选项
所有者
描述
+
{cats.map（（val，idx）=>{
设catId=`cat-${idx}`，
ageId=`age-${idx}`；
返回(
{`Cat#${idx+1}`}
年龄
+
);
})}
最小选择
最大选择
{/*添加新的cat*/}
);
}
}
导出默认表单；
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
详细答案 。这里有几件事不对： 您的
handleChangeclassName表单控件名称。而是尝试使用元素的名称
更新功能：
handleChange=e=>{
如果（[“姓名”、“年龄”]。包括（例如，target.name））{
让cats=[…this.state.cats]；
cats[e.target.dataset.id][e.target.name]=e.target.value.toUpperCase（）；
this.setState（{cats}，（）=>console.log（this.state.cats））；
}否则{
this.setState（{[e.target.name]：e.target.value.toUpperCase（）}）；
}
};
在一边
不要在其他
元素中呈现
元素。
不要这样做。这里不需要其他表格。把它拿走
// Line 76-80:
{cats.map((val, idx) => {
let catId = `cat-${idx}`,
ageId = `age-${idx}`;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
// ...
//第76-80行：
{cats.map（（val，idx）=>{
设catId=`cat-${idx}`，
ageId=`age-${idx}`；
返回(
// ...
我应该在onChange中写些什么？你能举个例子吗？@gamer我已经用一个详细的答案以及一个工作代码的链接更新了我的答案。谢谢你的回复@Martin。实际上，我必须为每个表单提交1个类别的数据。因此，如果用户生成10个表单，他将提交10个类别。为此，我需要生成new表单。不能有嵌套表单：：“内容模型：流内容，但没有表单元素子体。”不管怎样，这不是问题的重点。你的问题是关于控制表单字段的，所以我编辑了我的答案accordingly@gamer我现在编辑了我的答案，以便更具体地回答您的问题。如果您发现此解决方案有效（专门用于控制表单输入），请随意将答案标记为正确。