機能からレンダリングしたときにチェックボックスが切り替わらない

Question

これは少し奇妙な問題で、問題を追跡できませんでした。 Semantic-UI React（Form.Checkbox）を使って作成したチェックボックス/入力コンボがあります。チェックボックスの部分は、コンボ入力の少しの入力のために、アドオンと思う入力に追加されます。望ましい動作は、チェックボックスがチェックされているときに、ユーザーがコンボ入力のinput部分に入力を入力できるようにすることです。チェックボックスの状態は、コンポーネントのローカル状態で管理されます。

私はこのコードを含める場合：JSXで

<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> 

（機能をレンダリング）コンポーネントのをトグルが実際に発生した、状態がなど適切に管理されている。しかし、私は関数に同じコードを置きますそのような同じ入力バックレンダリングする：

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.Field />はSemantic-UI Reactコンポーネントに関する。 <Input />のコンポーネントのlabelフィールドの中のすべてのハッキーなものは、私が望むように入力をカスタマイズするだけです。

Answer 1

は、あなたはどんなのparamsなしthis.renderCheckboxInputField呼び出しているが、関数の定義では、「フィールド」を渡し、Reduxのフォームのことだ