Question

当我尝试将一个函数传递给子组件时，我遇到了一个问题，它始终显示一条消息，通知＆＃34; renderTextField未定义＆＃34;

这是我的代码。

表格容器

const renderTextField = props => (
  <TextField hintText={props.label}
    floatingLabelText={props.label}
    errorText={props.touched && props.error}
    {...props}
  />
)

class LoginPage extends React.Component {

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

  processForm(data) {
    console.log(data);
  }

  /* Render the component. */
  render() {  
    console.log(renderTextField);
    return (
      <LoginForm
        submitData={this.processForm}
        renderTextfield={renderTextField}
      />
    );
  }

}

表单子组件

   class LoginForm extends React.Component{

       constructor(props) {
        super(props);
       }

      render(){
        const { handleSubmit, pristine, reset, submitting, submitData, renderTextField } = this.props;

          return(
            <Card className="container">
              <form onSubmit={handleSubmit(submitData)}>
                <h2 className="card-heading">Login</h2>

                <div className="field-line">
                  <Field name="email" component={renderTextField} label="Email"/>
                </div>
        </form>
        </Card>
      )
  }
};

在LoginForm页面中产生如下错误：

未捕获的ReferenceError：未定义renderTextField

我也以父/容器形式执行console.log（renderTextField），它显示：

function renderTextField（props）{return _react3.default.createElement（_reduxFormMaterialUi.TextField，_extends（{hintText：props.label， floatingLabelText：props.label， errorText：props.touc ...

Answer 1

您没有正确地将该函数传递给LoginForm

renderTextfield={renderTextField}应为renderTextField={renderTextField}

无法将函数传递给React子组件

1 个答案: