Передача пользовательских реквизитов компоненту с помощью redux-form 7 - PullRequest
Новая
       6

Передача пользовательских реквизитов компоненту с помощью redux-form 7

0 голосов
/ 09 октября 2018

Я использую следующие библиотеки 

"@material-ui/core": "^3.0.3",
"react": "^16.5.0",
"redux": "^4.0.0",
"redux-form": "^7.4.2",

Как передать пользовательские реквизиты в мое component свойство redux-form <Field />?

Согласно этот пример из redux-form все, что у меня есть ниже, должно работать, но он не тянет реквизиты multiline={true} или rows={2} в компонент <TextField />.

Я не уверен, как этодолжен работать, как я новичок с Javascript.Любая помощь будет оценена.

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)

1 Ответ

0 голосов
/ 09 октября 2018

Чтобы отобразить многострочные поля, вам нужно передать multiLine={true} (обратите внимание на верблюжий корпус - это важно).Это основано на документах, связанных с https://github.com/erikras/redux-form-material-ui, которые выглядят как старая версия.Согласно более новым документам, кажется, multiline все строчные (оставляя его здесь для потомков).

Обновление

Кроме того, ...custom находится за пределамиФигурные скобки.Должно быть 

renderTextField = ({ input, label, meta: { error, touched } , ...custom })

Немного о том, как Field пропускает подпорки - недостаточно охватить все в этом ответе, но я могу дать несколько советов, которые помогут вам начать работу.

<Field ... /> - это обозначение JSX.В то время как JSX облегчает чтение и написание HTML-конструкций, [React actually doesn't need JSX][1].Внутри все они компилируются в чисто JS-функции (с использованием React.createElement и других заводских функций).

После этого передача ...custom и т. Д. - это всего лишь операторов отдыха / распространения , введенных в ES6.Они являются ярлыками, и вы можете использовать React без них (то есть вы можете использовать только синтаксис ES5).

...