Question

这是一个有点离奇的问题，我无法追查这个问题。我有一个使用Semantic-UI React（Form.Checkbox）创建的复选框/输入组合。对于一个小的组合输入情况，复选框部分被添加到输入，想想插件。期望的行为是当选中复选框时，它允许用户在组合输入的input部分中键入输入。复选框的状态在组件的本地状态下进行管理。

如果我只包含此代码：

<Form.Field className="field">
    <label>{field.label}</label>
    <Input
      {...field.input}
      label={{ basic: true, content: <Checkbox
        onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
        checked={this.state.sendEmail} />,
      style: {'borderRight': '0px'}
      }}
      disabled={!this.state.sendEmail}
      labelPosition='left'
      placeholder='Email Address'
    />
</Form.Field>

在组件的jsx（渲染函数）中，切换实际发生，状态管理正确等等。但是当我将相同的代码放入函数中以渲染相同的输入时，如下所示：

renderCheckboxInputField(field){
  return(
    <div>
      <Form.Field className="field">
        <label>{field.label}</label>
        <Input
          {...field.input}
          label={{ basic: true, content: <Checkbox
            onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
            checked={this.state.sendEmail} />,
          style: {'borderRight': '0px'}
          }}
          disabled={!this.state.sendEmail}
          labelPosition='left'
          placeholder='Email Address'
        />
      </Form.Field>
    </div>
  );
}

并从此处致电：

<Grid.Column>
  <Field
    name="email"
    label="Send Email"
    component={this.renderCheckboxInputField}
   />
</Grid.Column>

虽然状态正在正确更新，但实际上该复选框并未实际切换。您可能会问为什么不将它保留在已经工作的第一个位置，但是a）为了可重用性我将它放在函数中，并且b）我想以这种方式将它包含在<Field />组件中因为我正在使用Redux Form来验证我制作的复选框/输入组合的输入部分。

因此，为了澄清一下，<Field />组件来自Redux Form。 <Form.Field />与Semantic-UI React组件有关。 <Input />组件的label字段中的所有hacky内容都是我自定义输入以按照我的意愿显示。

Answer 1

您正在调用this.renderCheckboxInputField而没有任何参数，但在函数定义中，您传递'field'并在其中使用

从函数

1 个答案: