Question

我需要根据react中可选添加的字段的值来更新状态。我不确定如何在现有处理程序中引用要更新的字段，因为我将数组用于可选字段，将对象用于必需字段。该数组在状态中称为“可选字段”，它们使用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中使用ext可以使它不能在输入字段中键入。您应该使用value={some_value}

ReactJS中的onChange事件处理程序

1 个答案: