Question

如何在动态生成输入字段时重置输入字段？找不到任何关于此的信息。如果我事先知道会有多少字段，那么ref就很容易，或者每个value元素和input调用只有getInitialState()个唯一属性。< / p>

产品数组的大小可能会有所不同，那么您将如何重置所有输入字段？

Answer 1

如果您将（不受控制的）输入包装在HTML <form>元素中，那么

总是

<button type="reset">Reset</button>

否则，您可能希望将输入值绑定到prop或state项，然后使用handleReset检索并（重新）设置这些值。当状态或道具中的项目发生更改时，React将自动更新DOM的受影响部分。

在文档中详细了解表单输入：http://facebook.github.io/react/docs/forms.html#controlled-components

Answer 2

您可以按值数组

设置this.setState

https://jsfiddle.net/amb223fx/

Answer 3

编辑：正如mgrim所说，您可以使用HTML表单重置。或者，如果您需要更复杂的东西，请继续阅读。

看看this：

var products = [
    {name: 'Chocolate'}, 
  {name: 'Chips'}, 
  {name: 'Candy'}
];
// Size of the products array can vary!

var Hello = React.createClass({
    handleReset: function(){
    var products = this.state.products.map(function (product) {
      return Object.assign({}, product, {
        value: 0
      });
    });
    this.setState({products: products});
  },
  handleChange: function(index){
    return function(e){
      var products = this.state.products.slice();
      var product = products[index];
      products[index] = Object.assign({}, product, {
          value: parseInt(e.target.value, 10)
        });
        this.setState({products: products});
    }.bind(this);
  },
  getInitialState: function () {
    return {
      products: this.props.initialProducts.map(function (product) {
        return {
          name: product.name,
          value: 0
        }
      })
    }
  },
  render: function() {
    var prods = this.state.products.map(function(item, id){
        return (
        <li key={id}>
            {item.name}
          <input type="number" value={item.value} onChange={this.handleChange(id)} />
        </li>
      )
    }.bind(this));
    return (
        <ul>
        {prods}
        <button onClick={this.handleReset}>Reset</button>
      </ul>
    );
  }
});

React.render(<Hello initialProducts={products} />, document.getElementById('container'));

每当任何输入框发生更改时，您都必须致电setState;当用户打算重置所有输入时，您需要setState。

另外，我做了一些重构。我将products属性重命名为initialProducts属性。这是因为assigning a property to a state is an anti-pattern, unless we clarify that the inputed property will be a part of the state that will change over time。

Answer 4

这里的想法是获取所有输入并使用for来清理它们。请注意，我使用Jquery获取所有输入。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
      function cleanForm(){    
         var allInputs = $( ":input" );
         for (i = 0; i < allInputs.length; i++) { 
           allInputs[i].value = ""; 
         }
      }   
   </script>
</head>
<body>
    <form> 
        <input type="text" name="1"/>
        <input type="text" name="2"/>
        <input type="text" name="3"/>
        <input type="text" name="4"/>
        <input type="button" name="clean" onclick="cleanForm()" value="clean"/>
    </form>
</body>

如果我事先不知道有多少输入，如何重置HTML输入字段？

4 个答案: