如何清除反应中不受控制的场

Question

我曾经将 ref 用于表单，但现在我总是为表单声明，我面临一个问题，即在用户提交某些内容后必须清除字段。

handleSumbit = (e) => {
        e.preventDefault()
        const todoText = this.state.todoText
        if(todoText.length > 0){
            this.refs.todoTextElem = "" // wont work
            this.props.onAddTodo(todoText)
        } else {
            this.refs.todoTextElem.focus() //worked
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSumbit}>
                    <input ref="todoTextElem" type="text" onChange={e => this.setState({todoText: e.target.value})} name="todoText" placeholder="What do you need to do?" />
                    <button className="button expanded">Add Todo</button>
                </form>
            </div>
        )
    }

清除 ref 根本不起作用，因为它是一个受控输入。我不想做一些愚蠢的事情

从父组件传递一个标志，告诉表单已提交，然后使用 setState 清除输入。或者让 onAddTodo 有一个回调，这样我就可以做

this.props.onAddTodo(todoText).then(()=>this.state({todoText:""}))

Answer 1

您使用输入元素的方式是不受控制的，因为您没有使用 value 属性，意味着不控制它的值。只需将值存储在状态变量中即可。

如果使用ref，则不需要将输入字段值存储在状态变量中，ref将具有 的引用DOM element，因此您需要使用this.refName.value来访问该元素的值。

脚步：

1-像这样编写输入元素：

<input 
    ref= {el => this.todoTextElem = el} 
    type="text" 
    placeholder="What do you need to do?" />

要获得它的值：this.todoTextElem.value

2-要清除不受控制的输入字段，请使用ref清除其值：

this.todoTextElem.value = '';

像这样写：

handleSumbit = (e) => {
    e.preventDefault()
    const todoText = this.todoTextElem.value;
    if(todoText.length > 0){

        this.todoTextElem.value = '';     //here

        this.props.onAddTodo(todoText)
    } else {
        this.todoTextElem.focus() 
    }
}

另一个变化是关于字符串引用，根据 DOC：

如果您以前使用过 React，您可能会熟悉旧的 API，其中 ref 属性是一个字符串，如“textInput”，并且 DOM 节点通过 this.refs.textInput 进行访问。我们建议不要这样做，因为字符串引用存在一些问题，被认为是遗留问题，并且可能会在未来的版本之一中被删除。如果您当前正在使用 this.refs.textInput 访问引用，我们建议改用回调模式。