Question

我想了解如何将material ui组件包装到redux-form字段组件中？

<FormControl variant='outlined' className={classes.textField}>
            <InputLabel
              ref={ref => {
                this.InputLabelRef = ref
              }}
              htmlFor='outlined-county-simple'
            >
              {this.state.countryName}
            </InputLabel>
            <Select
              value={this.state.country}
              onChange={this.handleChangeCountry}
              input={
                <OutlinedInput
                  labelWidth={this.state.labelWidth}
                  name='country'
                />
              }
            >
              {isData(country) ? country.map((entity, index) => {
                return (
                  <MenuItem value={entity.code} key={`county-${index}`}>{entity.country}</MenuItem>)
              }) : null}
            </Select>
          </FormControl>

因此，我想将数据从此组件获取到redux-form存储中，用户将选择这种情况。我可以通过使用redux的change函数来做到这一点，但我认为这不是正确的工作方式。我有示例如何将TextField组件包装到redux表单组件

import mapProps from 'recompose/mapProps'
import TextField from '@material-ui/core/TextField'

export default mapProps(({
  input: {name, onChange, value},
  meta: {touched, error},
  helperText,
  ...restProps
}) => ({
  error: !!(touched && error),
  fullWidth: true,
  helperText: (touched && error) ? error : helperText,
  margin: 'normal',
  onChange: event => onChange(event.target.value),
  value,
  ...restProps
}))(TextField)

Answer 1

这应该有效。我们可以按照代码片段中所示将组件传递给Field，在我的例子中，这里是renderSelectField。

 <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >

如何将材料ui组件包装到Field的redux表单组件？

1 个答案: