Question

我试图找到一个反应中表单验证的好例子。我通过从父表单向其输入子节点发送事件并在每个表单上调用validate方法来找到验证。

我还通过循环表单子项并在字段验证后对子项调用setState来找到一种方法。

据我所知，这些是反模式，反应方式是通过道具回调来调用它 - react.js custom events for communicating with parent nodes

假设我有一个组件：

class Main extends React.Component {
 ...
 onSubmitHandler() {
  ...
 }

 render() {
  return (
   <FormComponent onSubmit={this.onSubmitHandler.bind(this)}>
     <InputComponent 
       value="foo"
       validation="required"
     />
     <input type="submit" value="Save" />
   </Form>  
  );
 }
}

class FormComponent extends React.Component {
  onSubmit() {
   // TODO: validation
  }

  render() {
   return (
     <form
       onSubmit={this.onSubmit.bind(this)}
     >
       {this.props.children}
     </form>
   );
  }
}

class InputComponent extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     value: props.value
   }
  }

  render() {
    return (
      <input 
        type="text"
        value={value}
    );
  }
}

我无法解决这个问题，我应该如何通过通过道具的回调来验证每个输入。

Answer 1

我已经为你添加了一些代码。总之，我所做的是在inputComponent中添加一个ref prop来公开它的validate函数（我在inputComponent中添加了它）。触发提交侦听器时将调用validate函数。最终验证函数调用＆＃34; isValid＆＃34;我们通过道具传递的回调。我认为这是你可以做到的一种方式。

class Main extends React.Component {
 ...
 onSubmitHandler() {
  ...
  this.refs.input1.validate();
 }

 render() {
  return (
   <FormComponent onSubmit={this.onSubmitHandler.bind(this)}>
     <InputComponent 
       ref="input1"
       value="foo"
       validation="required"
       isValid={this.isValidInput}
     />
     <input type="submit" value="Save" />
   </Form>  
  );
 }
 isValidInput(someParam) {
   console.log(someParam);
 }
}

class FormComponent extends React.Component {
  onSubmit() {
   // TODO: validation
  }

  render() {
   return (
     <form
       onSubmit={this.onSubmit.bind(this)}
     >
       {this.props.children}
     </form>
   );
  }
}

class InputComponent extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     value: props.value
   }
  }

  render() {
    return (
      <input 
        type="text"
        value={value}
    );
  }
  validate(){
    this.props.isValid(YesOrNo);
  }
}

我希望这会有所帮助

Answer 2

这是一个简化的例子（Child to Parent）：

var Bar = React.createClass({
  validate : function () {
    var number = React.findDOMNode(this.refs.input).value;
    this.props.check(number, this.success, this.fail);
  },
  success : function () {
    alert('Success');
  },
  fail : function () {
    alert('Fail');
  },
  render : function () {
    return (
      <div>
        <input type='number' min='1' max='20' ref='input'/>
        <br/>
        <button onClick={this.validate}>Click me to validate</button>
        <br/>
        (Values 1 - 10 are valid, anything else is invalid)
      </div>
    );
  }
});

var Foo = React.createClass({
  check : function (number, success, fail) {
    if (number >= 1 && number <= 10) {
      success();
    } else {
      fail();
    }
  },
  render : function () {
    return (
      <div>
        <Bar check={this.check} />
      </div>
    );
  }

});

在此示例中，<Bar/>是子项，<Foo/>是父项。 <Bar/>负责处理用户输入，当单击按钮时，它会调用<Foo/>中的函数来执行验证，完成后，将调用{{1}中的两个函数之一取决于结果。

这就是它的样子：http://jsbin.com/feqohaxoxa/edit?js,output

- 编辑 -

以下是“父母与孩子”的示例：

<Bar/>

对于这个，我使用父级中的状态来指示我是否要检查验证。通过将状态从false更改为true，我强制重新呈现，将true传递给子项。当孩子们收到新的道具时，他们会检查它是否真实，是否与最后一个不同，并进行验证。验证后，他们使用回调告诉父母将其验证状态设置为false。

演示：http://output.jsbin.com/mimaya

反应表单验证 - 回调不是事件

2 个答案: