reactjs - 如何清除 react 中不受控制的字段

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>
        )
    }

清除引用根本不起作用，因为它是受控输入。我不想做这样的蠢事

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

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

Answer 1

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

<小时/>

如果您使用ref，则不需要将输入字段值存储在状态变量中, ref将具有 DOM 元素 的引用，因此您需要使用 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() 
    }
}

另一个变化是关于 string refs, As per DOC :

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.