[英]Passing custom props to component with redux-form 7
I am using the following libraries 我正在使用以下库
"@material-ui/core": "^3.0.3",
"react": "^16.5.0",
"redux": "^4.0.0",
"redux-form": "^7.4.2",
How do I pass custom props to my component
property of the redux-form <Field />
? 如何将自定义道具传递给redux-form <Field />
component
属性?
According to this example from redux-form everything I have below should work, but it is not pulling the multiline={true}
or rows={2}
props into the <TextField />
component. 根据这个来自redux-form的示例 ,我下面的所有内容都应该起作用,但它不是将multiline={true}
或rows={2}
道具拉到<TextField />
组件中。
I am not sure how it is supposed to work as I am a novice with javascript. 我不确定该如何工作,因为我是javascript新手。 Any help would be appreciated. 任何帮助,将不胜感激。
PostForm.js PostForm.js
import React from 'react'
import { Link, withRouter } from 'react-router-dom';
import { reduxForm, Field } from 'redux-form';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'
class PostForm extends React.Component {
renderTextField = ({ input,
label,
meta: { error, touched } },
...custom) => {
return (
<TextField
name={label}
label={label}
{...input}
{...custom}
/>
);
};
onSubmit(event) {
event.preventDefault();
const { submitPost, history, formValues } = this.props;
submitPost(formValues.values, history);
}
render() {
<form onSubmit={this.onSubmit.bind(this)}>
<Field
name="title"
component={this.renderTextField}
label="Title"
/>
<Field
name="body"
component={this.renderTextField}
label="Body"
multiline={true}
rows={2}
/>
<div className={classes.buttonContainer}>
<Button to="/posts" component={Link} className={classes.button} color='secondary'>
Cancel
</Button>
<Button type='submit' className={classes.button} color='primary'>
Next
</Button>
</div>
</form>
}
}
export default reduxForm({
validate,
form: 'postForm',
destroyOnUnmount: false
})(PostForm)
To render multi line fields, you need to pass multiLine={true}
(notice the camel casing - this is important). 要渲染多行字段,您需要传递multiLine={true}
(请注意,骆驼套-这很重要)。 This is based on docs linked from https://github.com/erikras/redux-form-material-ui which seem like old version. 这是基于https://github.com/erikras/redux-form-material-ui链接的文档,这些文档看起来像旧版本。 According to newer docs, it seems multiline
is all lowercase (leaving it here for posterity's sake). 根据较新的文档, multiline
似乎都是小写的(为后代而留在这里)。
Update 更新
Also, ...custom
is outside of the curly braces. 此外, ...custom
不在花括号内。 Should be 应该
renderTextField = ({ input, label, meta: { error, touched } , ...custom })
A bit about how Field
passes props down - it's not enough to cover everything in this answer but I can give a few pointers to help you get started. 关于Field
如何传递道具的一些知识-不足以涵盖此答案中的所有内容,但我可以提供一些指导以帮助您入门。
<Field ... />
is JSX notation. <Field ... />
是JSX表示法。 While JSX makes it easy to read and wirte HTML constructs, [React actually doesn't need JSX][1]
. 尽管JSX使读取和编写HTML构造变得容易,但是[React actually doesn't need JSX][1]
。 Internally, they all compile to pure JS functions (using React.createElement
and other factory functions). 在内部,它们都编译为纯JS函数(使用React.createElement
和其他工厂函数)。
After that, passing ...custom
etc. is just rest/spread operators introduced in ES6. 在那之后,传递...custom
等只是ES6中引入的rest / spread运算符 。 They are shortcuts, and you can use React without them as well (meaning you can use just ES5 syntax). 它们是快捷方式,您也可以在没有它们的情况下使用React(这意味着您可以仅使用ES5语法)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.