我正在尝试动态生成 Rest 响应的输入字段。我无法通过指定 unique Id
来设置状态或unique name
对于 name
以来的所有输入字段和id
值是动态生成的。
这是我的代码:
export default class Rest extends Component {
constructor() {
super();
this.state = {
First_Name: "",
data: [],
}
}
handlesubmit = (e) => {
e.preventDefault();
const {First_Name} = this.state;
console.log(this.state)
}
someFunc = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
componentDidMount() {
fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()).
then((findresponse) =>
{
console.log(findresponse.movies)
this.setState({
data: findresponse.movies
})
})
}
render()
{
const {First_Name} = this.state;
return(
<div>
<form onSubmit={this.handlesubmit}>
<table className="tat">
<tr><th>name</th><th>year</th></tr>
{
this.state.data.map((dynamicData) =>
<tr className="trow"> <td> {dynamicData.title}
</td> <td> {dynamicData.releaseYear} </td> <td><Input placeholder="First Name..." value={First_Name} name="First_Name" id={dynamicData.releaseYear} onChange={this.someFunc}/></td>
</tr>
) }
</table>
<button type="Submit">submit</button>
</form>
</div>
)
}
}
The output for the following code
问题是 e.target.name
指定生成的所有输入字段的一个特定名称。所以如果我设置<input name={dynamicdata.releaseYear} />
,我将如何设置具有动态生成名称的所有输入字段的状态。
谢谢...
最佳答案
您正在尝试直接改变您的状态:
someFunc = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
你可以这样做:
someFunc = (e) => {
const newState = JSON.parse(JSON.stringify(this.state));
newState[e.target.name] = e.target.value;
this.setState(newState);
}
更新:
将e.target.name
更改为e.target.id
,以便每个键id
将存储相应输入的值字段。
someFunc = (e) => {
const newState = JSON.parse(JSON.stringify(this.state));
newState[e.target.id] = e.target.value;
this.setState(newState);
}
关于javascript - 在react中设置动态输入字段的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46968594/