Question

我有一个自定义控件，可以使用以下命令从父控件访问：

this.refs.myControl

自定义控件包含div中包含输入文本的div，包含在span标记中

如果我打印出this.refs.myControl，我可以看到控件的所有属性，但看不到用户输入的值。我想要做的是在单击按钮时清除用户输入的值。我试图清除状态，但不清除文本框中的值。

最好的方法是什么？

这是我的组件：

class Control extends React.Component {


        render() {
            if(this.props.type==1) {
                //input text
                return(<div>
                    <span>{this.props.label}</span>
                    <span>
                        <input type="text" name={this.props.name} id={this.props.name} onChange={this.props.localChange} /> 
                    </span>
                </div>); 
            } else if (this.props.type==2) {
                return(<div>
                    <span>{this.props.label}</span>
                    <span>
                        <textarea name={this.props.name} id={this.props.name} cols={this.props.width} rows={this.props.height}></textarea>

                    </span>
                </div>);

            } else if (this.props.type==3) {
                return(<div>
                    <span>{this.props.label}</span>
                    <span>
                        <select name={this.props.name} id={this.props.name} onChange={this.props.localChange} >
                         <option value="">- Select -</option>
                            {
                                this.props.values.map(function(option, index) {
                                    return <option key={index} value={option.value}>{option.text}</option>;
                                })
                            }
                        </select>

                    </span>
                </div>);

            } else if (this.props.type==4) {
                return(<div>
                <input type="submit" name={this.props.name} id={this.props.name} value={this.props.label} onClick={this.props.localClick} style={buttonStyle} />
                </div>);

            }

        }
    }

Answer 1

我建议在你的input元素中将你的状态变量绑定在value字段中。

e.g。

{{1}}

如何在React js中清除自定义控件的值

1 个答案: