以動態反應js形式輸入onChange事件

我有一個帶有標題輸入和動態數量的成分輸入的表單組件（用戶可以使用相應的按鈕添加和洗掉它們）。大多數表單功能正常。但是，我收到一條警告，說我已將value道具傳遞給表單欄位，但沒有onChange成分輸入元素的處理程式。

在render()我的表單組件中，這部分應該動態生成輸入（編輯：通過從表單狀態中的一組成分映射）：

{this.state.ingredients.map((element, i) => {
                    return (
                        <div key={i}>
                            <input
                                type='text'
                                placeholder='new ingredient'
                                value={element || ''}
                                onChange={this.handleIngredientChange.bind(this)}
                            />
                        </div>
                    );
                })}

我認為當用戶更改輸入值時，這些輸入將連接到我的handleIngredientChange方法以更新成分名稱的狀態：ith

    handleIngredientChange(i, event) {
        let ingredients = [...this.state.ingredients];
        ingredients[i] = event.target.value;
        this.setState({ingredients});
    }

并且這種方法將適當地允許反應來控制每個輸入元素。

我似乎誤解了this和/或.bind()，因為我在我的地圖功能中明確分配onChange={this.handleIngredientChange.bind(this)}了成分輸入元素。當用戶輸入這些輸入之一時，我們得到`TypeError：undefined is not an object（評估'event.target'）。

也許問題的根源在于，當用戶輸入輸入時，handleIngredientChange沒有正確設定以獲取用戶所需的輸入值，但我看不到錯誤在哪里。

我看過很多類似的問題，并試圖實施他們的答案無濟于事。誰能指出我為什么沒有正確處理onChange事件的正確方向？如果您需要我，我會非常樂意進一步解釋我的意圖。提前謝謝了。

完整代碼：

export default class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            ingredients: [],
        };
    }

    handleTitleChange(event) {
        let title = this.state.title;
        title = event.target.value;
        this.setState({title});
    }

    handleIngredientChange(i, event) {
        let ingredients = [...this.state.ingredients];
        ingredients[i] = event.target.value;
        this.setState({ingredients});
    }

    removeClick(i) {
        let ingredients = [...this.state.ingredients];
        ingredients.splice(i, 1);
        this.setState({ingredients});
    }

    addClick() {
        let ingredients = [...this.state.ingredients];
        ingredients.push('');
        this.setState({ingredients});
    }

    handleSubmit(event) {
        console.log('submit request logged')
        event.preventDefault();
    }

    render() {

        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    placeholder='recipe title'
                    value={this.state.title || ''}
                    onChange={this.handleTitleChange.bind(this)}
                />
                {this.state.ingredients.map((element, i) => {
                    return (
                        <div key={i}>
                            <input
                                type='text'
                                placeholder='new ingredient'
                                value={element || ''}
                                onChange={this.handleIngredientChange.bind(this)}
                            />
                        </div>
                    );
                })}
                <input
                    type='button'
                    value='add'
                    onClick={this.addClick.bind(this)}
                />
                <input
                    type='Submit'
                    value='save'
                    onClick={this.handleSubmit.bind(this)}
                />
            </form>
        )
    }
}

uj5u.com熱心網友回復：

我不確定這是否有幫助

嘗試改變

<input
                type="text"
                placeholder="new ingredient"
                value={element || ""}
                id={i}
                onChange={this.handleIngredientChange.bind(this)}
              />

然后改變

 handleIngredientChange(event) {
    let ingredients = [...this.state.ingredients];
    ingredients[event.target.id] = event.target.value;
    this.setState({ ingredients });
  }

https://codesandbox.io/s/react-playground-forked-yf7rpm

標籤：javascript 反应 形式 事件处理 这个

上一篇：反向排序Google表格中的資料

下一篇：如何使用css設定django表單的樣式？