Question

我正在学习React，并创建了一个非常简单的“购物清单应用”。现在一切正常，但我收到此错误消息：“警告：组件正在将要控制的文本类型的不受控制的输入更改。输入元素不应从不受控制的状态切换到受控制的状态（反之亦然）。决定使用受控制的还是不受控的组件生命周期中不受控制的输入元素”。

这是我的代码：

function InputArea(props) {

    const [inputText, setInputText] = useState({
       inputText: {text: ""}
    });

    function handleChange(event){
        setInputText(event.target.value);
    }

    function handleClick(event) {
        props.onSubmit(inputText);
        setInputText({text: ""});
        event.preventDefault();
    }

    return(
             <div className="input-group w-50">
                <input 
                    type="text" 
                    className="form-control" 
                    onChange={handleChange} 
                    ariadescribedby="button-addon" 
                    value={inputText.text} 
                    placeholder="Insert Item">
                </input>
            <div className="input-group-append">
                <Button
                    id="button-addon"
                    color="dark"
                    style={{marginBottom: "2rem"}} 
                    onClick={handleClick}>Add Item
                </Button>
            </div>
        </div>
    )
}

当我想重置输入以查看占位符而不是最后添加的项的名称时，出现问题。

Answer 1

问题在于如何更新状态，如何使用状态以及如何初始化状态。

使用类中与ssh jenkins@192.168.13.156:22 "echo \"$DOCKER_REGISTRY\""不同的钩子，状态更新程序的值不会合并而是在运行时被替换

setState

您的inputText已从其先前的

结构中替换

setInputText({text: ""});

导致错误

由于您正在使用{ inputText: {text: ""} }来设置输入字段的值，因此也必须以这种方式初始化状态

inputText.text

反应：不受控制/受控制的输入

1 个答案: