Question

我正在处理一个生成随机代码的简单表单，然后检查用户是否输入了正确的代码。

我的问题是我不知道如何匹配用户输入和生成的代码（来自不同的组件）。

希望你理解我。

感谢。

请检查我的代码

<Form onSubmit={this.handleSubmit}>
        <FormItem
          validateStatus={captchaError ? "error" : ""}
          help={captchaError || ""}
        >
          {getFieldDecorator("captcha", {
            rules: [{ required: true, message: "Please input code!" }]
          })(
            <Input
              prefix={<Icon type="key" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="text"
              placeholder="captcha"
              addonAfter={<Captcha />}
            />
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
          >
            Log in
          </Button>
        </FormItem>
      </Form>

Answer 1

您需要在Parent中获取子值。您可以按照此处的建议使用Refs to Components方法：https://github.com/kriasoft/react-starter-kit/issues/909

这是working code，它会在输入正确的验证码时显示警告。

这会有所帮助！：）

Answer 2

antd已将getFieldsValue转到documentation。另一种通过onchange事件获取文本的方法，如

handleValueChange(e) {
    e.preventDefault()
    console.log("textValue", e.target.value)
}

您的input为

<Input
   prefix={<Icon type="key" style={{ color: "rgba(0,0,0,.25)" }} />}
   type="text"
   onChange={this.handleValueChange.bind(this)}
   placeholder="captcha"
   addonAfter={<Captcha />}
 />

Answer 3

您可以将生成随机数的函数放在验证码组件之外，并将随机数作为道具传递，如：

 <Captcha numbers={xxxx} />

使用Reactjs验证验证码

3 个答案: