javascript - 在react中设置动态输入字段的状态

Question

我正在尝试动态生成 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} /> ，我将如何设置具有动态生成名称的所有输入字段的状态。

谢谢...

Answer 1

您正在尝试直接改变您的状态:

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);
}