Создание пользовательского интерфейса для пользовательского стиля с помощью приставки - PullRequest
Новая
       6

Создание пользовательского интерфейса для пользовательского стиля с помощью приставки

0 голосов
/ 22 ноября 2018

При создании пользовательского стиля с пользовательским интерфейсом Material + redux-form элемент Field из redux-form не применяет имена пользовательских классов.При простом использовании FieldText из Material UI делает.Я прокомментировал неработающую строку кода ниже.

Объект пользовательских стилей применяется к компоненту реагирования через опору с именем 'classes', которая определена в прототипе.

import React, {Component} from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import {createOrder} from '../actions';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center'
  },
  margin: {
    margin: theme.spacing.unit,
  },
  textField: {
    flexBasis: 400,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});


class Order extends Component {

  renderField(field) {
    return (
      <div>
        <TextField
          id="outlined-simple-start-adornment"
          // className={classNames(classes.margin, classes.textField)}
          variant="outlined"
          label="Age"

          {...field.input}
        />

      </div>
    )
  }

  render() {
    const { classes } = this.props;
    return (
      <form >
        <div className={classes.root}>
          <Field
            name="age"
            label="age"
            component={this.renderField}
          />
          <TextField
            id="outlined-simple-start-adornment"
            className={classNames(classes.margin, classes.textField)}
            variant="outlined"
            label="Company Name"
          />
        </div>
      </form>
    );
  }
}

Order.propTypes = {
  classes: PropTypes.object.isRequired,
};



export default reduxForm({
  form: 'Form'
})(
  connect(null, {createOrder})(withStyles(styles)(Order))
);

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Я думаю, что вы определили const { classes } = this.props; в render(), но он не доступен внутри renderField(field){...} из-за его области действия.

Нельзя деструктурировать подпорки для всего компонента.Деструктурирование может назначать только локальные переменные , поэтому вам потребуется деструктурировать реквизиты в каждой функции.В противном случае нет ничего плохого в том, что вам нужно написать this.props.value.

Итак, у вас есть две альтернативы

1] передать реквизит на renderField() или снова деструктурировать const { classes } = this.props внутри renderField()

2] Непосредственно используйте this.props.classes вместо classes в renderField()

0 голосов
/ 22 ноября 2018

Поскольку classes не определено, вы можете получить доступ к classes из реквизита.

, как это. 

className={classNames(this.props.classes.margin, this.props.classes.textField)}

TextField должно быть так. 

<TextField
      id="outlined-simple-start-adornment"
      className={classNames(this.props.classes.margin, this.props.classes.textField)}
      variant="outlined"
      label="Age"
      {...field.input}
    />
...