ReactJS中的onChange事件處理程序

Question

我需要根據react中可選添加的字段的值更新狀態。 我不確定如何引用我想在現有處理程序中更新的字段，因為我使用數組作為可選字段和對象的必填字段。 該數組在狀態中稱為optionalfields，它們使用renderHelper（）方法呈現。

我試過傳入索引，但這打破了事件的功能。

狀態初始化

    state = {
        fields:{
            category: "",
            type:"",
            host:"",
            context:""
        },
        optionalfields:[],
        newFieldName:""
    }

在改變處理程序

handleChange = (event) => {
        const target = event.target
        if (target.name === 'newFieldName') {
            this.setState({
                newFieldName: target.value
            })
        } else if (target.name in this.state.fields) {
            this.setState(prevState => ({
                fields: {
                    ...prevState.fields,
                    [target.name]:target.value
                }
            }))
        } else {
            //Update input value
        }
    }

渲染助手方法

    renderHelper() {

        return (
            this.state.optionalfields.map((field,index) => {
                return (
                    <div key={field.name}>
                        {field.name}:<input onChange={this.handleChange} type="text" name={field.name} value={this.state.optionalfields[index].value} autoComplete="off" /><button onClick={(event) => this.removeField(field.name, event)} type="button">Remove</button><br/>
                    </div>
                )
            })
        )
    }

Answer 1

在React中使用value={some_value}將使它無法輸入輸入字段。 你應該使用defaultValue="{some_value}"