Question

我已经堆积了。我希望将 React-Semantic-UI组件与 redux-form 集成。字段组件不处理输入。我从键盘输入了一些值，没有任何反应，输入字段为空。请有人帮忙，我做错了什么？我发现了一些关于这个主题的相关问题但没有任何帮助

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Button, Form, Message, Progress, Checkbox } from 'semantic-ui-react';

const renderField = ({
  label,
  input,
  name,
  placeholder,
  type,
  meta: { touched, error, warning }
}) => (
  <Form.Input required inline {...input} value={input.value} name={name} onChange={(param, {value}) => input.onChange(value)} label={label} placeholder={placeholder} />
)

const Registration = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <Form loading={false} onSubmit={handleSubmit}>
      <Field
        name="name"
        type="text"
        component={renderField}
        label="Имя"
        placeholder="введите ваше имя"
      />
      <Field
        name="email"
        type="text"
        component={renderField}
        label="Email"
        placeholder="введите действующую почту"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
        placeholder="придумайте пароль"
      />
      <Field
        name="confrim"
        type="Confirm"
        component={renderField}
        label="Имя"
        placeholder="повторите ваш пароль"
      />
      <Form.Field>
        <Checkbox name="agree" label='I agree to the Terms and Conditions' />
      </Form.Field>
      <Message
          success
          header='Form Completed'
          content="You're all signed up for the newsletter"
      />
      <Progress color="red" percent={100} />
      <Button disabled={!pristine} type="submit">Ок</Button>
    </Form>
  )
}

export default reduxForm(
  {form: 'registration'}
)(Registration)

Answer 1

研究员，我找到了解决问题的方法。然后你使用 redux ，你需要将 redux-form reducer添加到app reducer中。

    {
      "bool": {
          "must": [
            {
                "range": {
                    "timestamp": {
                        "gt": ${timestamp_from},
                        "lt": ${timestamp_to},
                        "include_lower": true,
                        "include_upper": false
                    }
                }
            }
          ]
        },
      "aggs": {
        "max_timestamp": {
        "max": {
        "field": "timestamp"
        }
    }
  }
}

Redux Form和Semantic UI，处理输入onChange

1 个答案: