无法将函数传递给 React 子组件
can't passing function to React child component
当我尝试将一个函数传递给内部的子组件时遇到问题,它总是显示一条消息通知 "renderTextField is not defined"
这是我的代码。
表单容器
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页面中产生这样的错误:
Uncaught ReferenceError: renderTextField is not defined
我也以 parent/container 形式执行 console.log(renderTextField),它显示:
function renderTextField(props) { return
_react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label,
floatingLabelText: props.label,
errorText: props.touc…
您没有正确地将函数传递给 LoginForm
renderTextfield={renderTextField}
应该是 renderTextField={renderTextField}
当我尝试将一个函数传递给内部的子组件时遇到问题,它总是显示一条消息通知 "renderTextField is not defined"
这是我的代码。
表单容器
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页面中产生这样的错误:
Uncaught ReferenceError: renderTextField is not defined
我也以 parent/container 形式执行 console.log(renderTextField),它显示:
function renderTextField(props) { return _react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label, floatingLabelText: props.label, errorText: props.touc…
您没有正确地将函数传递给 LoginForm
renderTextfield={renderTextField}
应该是 renderTextField={renderTextField}