Question

根据React规范： https://reactjs.org/docs/refs-and-the-dom.html “refs有一些很好的用例：管理焦点，文本选择或媒体播放。触发势在必行的动画。与第三方DOM库集成。 避免将refs用于以声明方式完成的任何事情。“

这就是为什么我现在不太确定，在这种情况下我是否正确使用了ref：

如果没有，为了将ref替换为onChange = {}，怎么能重新排列？

Answer 1

您可以通过控制输入字段来避免使用引用。这是一个例子：

export let FormInput = createReactClass({

    constructor(props){
        super(props);
        this.state = {
            name: '',
        };
    }

    handleNameChange(updatedName){
        this.setState({ name: updatedName });
    }

    handleInput(e){
        e.preventDefault();
        const product = this.state.name;
        // ...
        this.props.addProduct(product);
        this.inputForm.reset();
    },

    render(){
        return (
            <form className="prod_input" ref={x => this.inputForm = x} onSubmit={this.handleInput}>
                <input type="text" value={this.state.name} placeholder="Product name" onChange={e => this.handleNameChange(e.target.value)} />
               // ...
            </form>
        );
    }
})

我们的想法是让您的字段值保持在本地状态。然后，您可以将每个字段的值设置为当前存储在您的状态中的值，并附加一个onChange处理程序，该处理程序会在每个用户键入内容时更新此值。提交表单时，您的所有值都可以直接在组件的状态下使用。

反应。我可以摆脱反对onChange吗？

1 个答案: