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

以下代碼的輸出

問題是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);
}

Answer 2

哦，我以前遇到過這個問題。 將您的form更新為

<form onSubmit={(e) => this.handlesubmit(e)}>
                        <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={(e) => this.someFunc(e)}/></td>
                                </tr>)
                    ) }
                        </table>
                        <button type="Submit">submit</button>
  </form>

將onSubmit和onChange函數更改為：

onSubmit={(e) => this.handlesubmit(e)}

和

onChange={(e) => this.someFunc(e)}

分別。

這個問題是因為范圍this ，當你撥打onSubmit或onChange用自己的方式， this是DOM元素不是組件做出反應，因此this並沒有獲得反應state的屬性。

更新：根據您的評論

更改功能如下

onChange={e => this.someFunc(e, dynamicData.releaseYear)} // because dynamicData.releaseYear is the ID

下一個

someFunc = (e, id) => {
        const state = this.state
        state[id] = e.target.value; // or state["prefix_"+id] = e.target.value;
        this.setState(state);
    }

或者，如果您想使用名稱

this.state.data.map((dynamicData, index) =>
                                (<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={e => this.someFunc(e, index)}/></td>
                                </tr>)
                    ) }

someFunc = (e, index) => {
            const state = this.state
            state[e.target.name +"_"+index] = e.target.value;
            this.setState(state);
        }