Question

如何将Reactstrap输入的值设置为空？我正在使用这样的代码。

handleChange = (event) => {
    this.setState({message: event.target.value});
};

<输入onChange = {this.handleChange} />

此外，获取输入值（refs或onChange）的最佳实践是什么？

Answer 1

您需要为输入字段分配状态值。

public class myApp() extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            message: ''
        };
    }

    handleChange = (event) => {
        this.setState({message: event.target.value});
    };

    render() {
        return (
            <Input value={this.state.message} onChange={this.handleChange} />
        );
    }
}

Answer 2

您必须为输入设置一个value属性，该属性保存输入的值，因此您的输入如下所示：

<Input value={this.state.message} onChange={this.handleChange} />

，然后当您想清除其值时，只需执行以下操作：

this.setState({message: ''})

对于您的另一个问题，答案是Ref提供了一种访问DOM节点或在render方法中创建的React元素的方法，根据React文档。您可以在以下情况下使用Refs：

管理焦点，文本选择或媒体播放。
触发命令性动画。
与第三方DOM库集成。

，您必须声明性地使用引用来避免发生任何事情。然后，在这里我们只使用onChange，因为我们不仅仅需要引用！

将Reactstrap输入的值设置为空字符串

2 个答案: