Question

我有一个演示组件，它从容器组件中获取一个函数作为prop。我想将ref作为参数返回，并将函数返回给容器组件。但它以undefined返回。

（我想要实现的是将用户插入到表单组件中的表单中的电子邮件地址发送回容器组件，以便我可以在那里处理它。）

关于如何使这项工作的任何建议？

容器组件

class EmailInputContainer extends Component {
  addEmailToList(childComponent){
    console.log(childComponent.refs)
  }
  render(){
    return(
      <EmailInputView addEmailToList={this.addEmailToList}/>
    )
  }
}

演示文稿组件

const EmailInputView = (functions) => (
  <Grid style={Styles.emailInputView.container} verticalAlign='middle'>
    <Cell width='5/12' style={Styles.smallText('black', 1.1, 1.5, 'left')}>
      <p>Enter your mail and we'll keep you<br />posted with news and updates!</p>
    </Cell>
    <Cell width='5/12' align='right'>
      <form onSubmit={functions.addEmailToList(this)}>
        <input style={Styles.emailInputForm.emailInput} ref='emailInput' type="text" name="email" placeholder="Your email address" />
        <input style={Styles.emailInputForm.submitButton} type="submit" value="Submit" />
      </form>
    </Cell>
  </Grid>
)

Answer 1

Imho最佳做法是将onchange处理程序从支持传递到您的EmailInputView，如：

class EmailInputContainer extends Component {

   handleChange: function(event) {
      this.setState({myEmail: event.target.value});
   }

   render(){
      return(
         <EmailInputView onChange={this.handleChange.bind(this)} />
      )
   }
}

和

<input onChange={this.props.onChange} style={Styles.emailInputForm.emailInput} type="text" />

在EmailInputView本身中

。适用于

<form onSubmit={this.props.onChange}>
  ...
</form>

（没有检查过事件你可能需要稍微调整EmailInputContainer中的处理程序。）

在这种情况下，你不必通过一个更符合反应哲学的ref。 Imho你永远不应该按照自己想要的方式传递引用，只有在没有其他方法时才使用你所在的组件中的引用。

Optinal（如果你不想提交表格）：

class EmailInput extends Component {

  onChange(event) {
     this.setState({myEmail: event.target.value});
  }

  onSubmit() {
     this.props.onChange(this.state.myEmail); //u should rename the prop i just named it so it fits with the example of the parent component above
  }

  render() {
     return (
        <Cell>
           <input onChange={this.onChange} />
           <button onClick={this.onSubmit} />
        </Cell>
     );
  }

}

如果您不想在之后阻止其功能，则根本不需要使用表格。如果您仍然希望在没有页面重新加载的情况下发布数据，则必须执行Ajax调用。

Answer 2

在演示组件中，在呈现时通过回调函数捕获ref节点，然后在提交时将节点值传递回父节点。

let inputNode

const EmailInputView = (functions) => (
  <Grid style={Styles.emailInputView.container} verticalAlign='middle'>

    ...  

    <Cell width='5/12' align='right'>
      <form 
        onSubmit={() => functions.addEmailToList(inputNode.value)} <-- update here
      >
        <input style={Styles.emailInputForm.emailInput} 

          ref={node => inputNode = node} <-- this is what you want

          type="text" name="email" placeholder="Your email address" />
        <input style={Styles.emailInputForm.submitButton} type="submit" value="Submit" />
      </form>
    </Cell>
  </Grid>
)

然后更新你的处理程序：

addEmailToList(value){
  console.log(value)
}

所以这个解决方案很棒，特别是当你没有处理任何东西的父级时，例如直接从具有输入字段的组件调度redux操作。然而，@ Aligertor的回答很明显。

React：将ref发送回容器组件？

2 个答案: