Question

我会在这里更好地解释我的自我，例如我有2个组件1将是Modal 2将是Form。

模态将具有将传递给Form的状态，函数。表格应该有它自己的参考。 Modal可以使用。我试着说明一下：

class Modal extends Component {

 handleSubmit(e) {
  e.preventDefault();
  if ($(this.refs.form).form('is valid') {
  //Do something...
  }
 }

 render() {
  return (
   <Form ref="form" handleSubmit={::this.handleSubmit} />
  )
 }
}

class Form extends Component {
 render() {
  return (
   <form onSubmit={this.props.handleSubmit} ref={this.props.ref}>
    //Inputs go here...
   </form
  )
 }
}

现在我们在Modal中分配的引用不起作用......我们只能在Form组件中使用表单ref ....我该如何共享它们？

Answer 1

如果你真的需要这个：

class Modal extends Component {

 handleSubmit(e) {
  e.preventDefault();
  if(this._form._inner.state.isValid) {
   //Do something...
  }
 }

 render() {
  return (
   <Form ref={c => this._form = c} handleSubmit={this.handleSubmit} />
  )
 }
}

class Form extends Component {
 state = {
   isValid: false
 }

 render() {
  return (
   <form onSubmit={this.props.handleSubmit} ref={c => this._inner = c}>
    //Inputs go here...
   </form>
  )
 }
}

但你应该尝试使用回调构建组件并在那里做事。

最好尝试这样的事情：

class Modal extends Component {

 handleSubmit(isValid) {
   //... do stuff
 }

 render() {
  return (
   <Form handleSubmit={this.handleSubmit} />
  )
 }
}

class Form extends Component {

 constructor(props) {
  super(props);
  this.onSubmit = this.onSubmit.bind(this);
 }

 validate() {
   // ... validate
   this.setState({ isValid: ... });
 }

 onSubmit() {
  const { handleSubmit } = this.props;


  if(handleSubmit) {
   handleSubmit(this.state.isValid);
  }
 }

 render() {
  return (
   <form onSubmit={this.onSubmit}>
    //Inputs go here...
   </form>
  )
 }
}

如果你使用React，你应该摆脱jQuery。有点过载..

React：如何在父组件中使用子组件的ref？

1 个答案: