Question

我正在使用redux-form创建身份验证表单。

import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Grid from '@material-ui/core/Grid';
import TextField from '../../components/TextFieldWrapper';



const Authentication = ({
  classes,
  submitting,
  handleSubmit,
}) => (
  <div>
      <form onSubmit={handleSubmit}>
        <Grid
          container
          direction="column"
          alignContent="center"
          spacing={24}
        >
          <Grid item xs={10} md={10} lg={10}>
            <Field
              name="Email"
              type="email"
              component={TextField}
              label="Email"
            />
          </Grid>
          <Grid item xs={6}>
            <Field
              name="Password"
              type="password"
              component={TextField}
              label="Password"
            />
          </Grid>
          <Grid item xs={6}>
            <Button
              variant="contained"
              color="primary"
              type="submit"
              disabled={submitting
            >
          Login
            </Button>
          </Grid>
        </Grid>
      </form>
    </PaperWrapper>
  </div>

);

Authentication.propTypes = {
  submitting: PropTypes.bool.isRequired,
  handleSubmit: PropTypes.func.isRequired,
};

const AuthenticationForm = reduxForm({
  form: 'AuthenticationForm',
})(Authentication);



export default AuthenticationFom;

TextFieldWrapper.jsx：

import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';


const TextFieldWrapper = ({
  label,
  type,
}) => (
  <TextField
    label={label}
    margin="normal"
    type={type}
    variant="outlined"
  />
);

TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};


export default TextFieldWrapper;

当我使用redux-devtools调试应用程序时，我发现Field的值不会改变我在TextFields中输入的内容。状态是这样的：

我应该在每个字段中添加value和onChange函数。在Redux-form的文档中，它们不会在FieldComponent Material-Ui Example

中添加值或onChange

Answer 1

在使用类似的自定义组件时，您需要将input属性从TextFieldWrapper中转发到用户界面TextField。

{...input}的{{1}}部分中的Redux格式show it的文档

Answer 2

我找到了解决方案，我更新了$agent_name = $db->real_escape_string($_POST['agent_name']); $agent_id = $db->real_escape_string($_POST['agentid']); $customer_name = $db->real_escape_string($_POST['customer_name']); $TID = $db->real_escape_string($_POST['transac_id']); if (empty($TID)) { array_push($errors, "Please Enter Transaction ID"); } else { $sql = $db->query("UPDATE payment SET agent_name='$agent_name', Agent_id='$agent_id', customer_name='$customer_name' WHERE TRIM(TID)=$TID"); if ($sql) { array_push($errors, "Updated successfull"); } else { array_push($errors, "Not Updated."); }：

TextFieldWrapperComponent

因此，我将import React from 'react'; import PropTypes from 'prop-types'; import TextField from '@material-ui/core/TextField'; const TextFieldWrapper = ({ label, type, input, }) => ( <TextField label={label} margin="normal" type={type} value={input.value} onChange={input.onChange} variant="outlined" /> ); TextFieldWrapper.propTypes = { label: PropTypes.string.isRequired, type: PropTypes.string.isRequired, input: PropTypes.shape({}).isRequired, }; export default TextFieldWrapper;属性添加到组件中，以获取通过redux-form发送的道具。

使用Redux开发工具插件进行调试时，字段值不会更改

2 个答案: