Javascript react引导：清除元素值

我正在尝试在

onClick

事件后清除输入字段

我使用的是

react bootstrap

库，虽然有

getValue（）

方法，但没有

setValue（value）

方法

我偶然发现了这个

我不完全理解他们为了在提交后简单地清理表单而提出的建议

毕竟，如果我使用一个简单的HTML

而不是

react bootstrap

，我可以通过元素

ref

抓取节点，并将其值设置为空字符串或其他内容

---

什么是清除react引导元素的react方法？

将状态存储在react组件中，通过道具设置元素值，通过事件回调获取元素值。以下是一个例子：

下面是一个直接取自其文档的示例。我刚刚添加了一个

clearInput（）

方法，向您展示只需更新组件的状态即可清除输入。这将触发重新渲染，导致输入值更新

const ExampleInput = React.createClass({
  getInitialState() {
    return {
      value: ''
    };
  },

  validationState() {
    let length = this.state.value.length;
    if (length > 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
  },

  handleChange() {
    // This could also be done using ReactLink:
    // http://facebook.github.io/react/docs/two-way-binding-helpers.html
    this.setState({
      value: this.refs.input.getValue()
    });
  },

  // Example of how you can clear the input by just updating your state
  clearInput() {
    this.setState({ value: "" });
  },

  render() {
    return (
      <Input
        type="text"
        value={this.state.value}
        placeholder="Enter text"
        label="Working example with validation"
        help="Validation is based on string length."
        bsStyle={this.validationState()}
        hasFeedback
        ref="input"
        groupClassName="group-class"
        labelClassName="label-class"
        onChange={this.handleChange} />
    );
  }
});

const ExampleInput=React.createClass({
getInitialState（）{
返回{
值：“”
};
},
validationState（）{
让长度=this.state.value.length；
如果（长度>10）返回“成功”；
否则，如果（长度>5）返回“警告”；
否则如果（长度>0）返回“错误”；
},
handleChange（）{
//这也可以使用ReactLink完成：
// http://facebook.github.io/react/docs/two-way-binding-helpers.html
这是我的国家({
值：this.refs.input.getValue（）
});
},
//仅通过更新状态即可清除输入的示例
clearInput（）{
this.setState（{value:}）；
},
render（）{
返回(
);
}
});

对于我目前正在做的工作，我并不认为有必要通过setState/Flux控制输入组件的值（也就是说，我不想处理所有的样板文件）…所以这里是我所做工作的要点。希望上帝能原谅我

import React from 'react';
import { Button, Input } from 'react-bootstrap';

export class BootstrapForm extends React.Component {

  constructor() {
    super();
    this.clearForm = this.clearForm.bind(this);
    this.handleSave = this.handleSave.bind(this);
  }

  clearForm() {
    const fields = ['firstName', 'lastName', 'email'];
    fields.map(field => {
      this.refs[field].refs['input'].value = '';
    });
  }

  handleSubmit() {
    // Handle submitting the form
  }

  render() {
    return (
      <div>
        <form>
          <div>
            <Input
              ref='firstName'
              type='text'
              label='First Name'
              placeholder='Enter First Name'
            />
            <Input
              ref='lastName'
              type='text'
              label='Last Name'
              placeholder='Enter Last Name'
            />
            <Input
              ref='email'
              type='email'
              label='E-Mail'
              placeholder='Enter Email Address'
            /> 
            <div>
              <Button bsStyle={'success'} onClick={this.handleSubmit}>Submit</Button>
              <Button onClick={this.clearForm}>Clear Form</Button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

从“React”导入React；
从“react bootstrap”导入{按钮，输入}；
导出类BootstrapForm扩展React.Component{
构造函数（）{
超级（）；
this.clearForm=this.clearForm.bind（this）；
this.handleSave=this.handleSave.bind（this）；
}
clearForm（）{
常量字段=['firstName'，'lastName'，'email']；
fields.map（field=>{
this.refs[field].refs['input'].value=''；
});
}
handleSubmit（）{
//处理提交表单
}
render（）{
返回(
提交
清晰的形式
);
}
}

您也可以使用ReactDOM：

<FormControl
  componentClass="select"
  ref="sStrike">
  <option value="-">Select&hellip;</option>
  <option value="1">1</option>
  <option value="2">2</option>
</FormControl>

---

这会将选择框设置为“默认”值。

如果使用FormControl作为输入，并且希望使用ref来更改/获取其中的值，则使用inputRef而不是ref

<FormControl inputRef={input => this.inputText = input} .../>

---

这对我来说很有效，以防其他人正在寻找答案：D

您可以使用访问react引导的值

console.log(e.target.form.elements.fooBar.value)

您可以使用

e.target.form.elements.fooBar.value = ""

从“React”导入React；
从“react bootstrap”导入{按钮，表单}；
导出默认函数示例（道具）{
常量handleSubmit=（e）=>{
//处理提交表单
}
常量重置搜索=（e）=>{
e、 预防默认值（）；
e、 target.form.elements.fooBar.value=“”
}
render（）{
返回(
提交
重置
);
}
}

console.log(e.target.form.elements.fooBar.value)

e.target.form.elements.fooBar.value = ""

    import React from 'react';
    import {Button, Form} from 'react-bootstrap';

    export default function Example(props) {

    const handleSubmit = (e) => {
    // Handle submitting the form
    }

    const resetSearch = (e) => {
      e.preventDefault();
      e.target.form.elements.fooBar.value = ""
    }

    render() {
      return (
          <Form onSubmit={handleSubmit} onReset={resetSearch} >
             <Form.Control type="input" name="fooBar" />  
             <Button type="submit">  Submit  </Button> 
             <Button onClick={resetSearch} type="submit" > Reset  </Button> 
          </Form>
          );
       }
    }