Question

我正在尝试在onClick事件后清除输入字段。

我正在使用react-bootstrap库，虽然有getValue()方法，但没有setValue(value)方法。

我偶然发现了discussion。

我没有完全明白他们建议什么，以便在提交后简单地清理表格。

毕竟，如果我使用简单的HTML <input>而不是react-bootstrap，我可以通过元素ref获取节点，并将其值设置为空字符串或其他内容。

什么被认为是清理我的react-bootstrap <Input />元素的反应方式？

Answer 1

将状态存储在React组件中，通过props设置元素值，通过事件回调获取元素值。这是一个例子：

以下是直接从他们的文档中获取的示例。我刚刚添加了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} />
    );
  }
});

Answer 2

对于我目前正在做的事情，我并不认为有必要通过setState / Flux来控制Input组件的值（也就是说我不想处理所有的样板）...所以这是我所做的一切。希望React的神能原谅我。

pageNum = (int)(selector.xpath('//input[@name="mp"]')[0].attrib['value'])

Answer 3

您也可以使用ReactDOM：

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

现在，另一个FormControl会触发onChange={handleChange}，在该处理程序中，您只需标识ref并设置为默认值：

ReactDOM.findDOMNode(this.refs.sStrike).value = '-';

这会将选择框设置为＆＃39;默认＆＃39;值。

Answer 4

如果您使用FormControl作为输入，并且您想使用ref来更改/获取值，则使用inputRef而不是ref

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

并使用它来获取/更改其值：

this.inputText.value

Answer 5

这对我有用，以防其他人正在寻找答案：D

您可以通过使用来访问 react-bootstrap 的值

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

react-bootstrap：清除元素值

5 个答案: