ReduxForm - Semantic-UI select入力から選択値を取得する

Question

React Semantic-UIのコンポーネントからRedux Formを使用してドロップダウンメニューの値を取得しようとしています。私は正常なテキスト入力から値を正常に受け取ったが、選択された入力は受け取れなかった。

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { Button, Header, Icon, Modal, Transition, Form, Input, Select, TextArea, Dropdown } from 'semantic-ui-react'; 
import '../../index.css'; 

const status = [ 
    { key: 'Online', text: 'Online', value: 'Online' }, 
    { key: 'Offline', text: 'Offline', value: 'Offline' }, 
]; 
class NewInfoForm extends Component { 

    Status({ input, meta: {touched, error}, ...custom }) { 
    console.log({...custom}) 
    return (
     <Form.Field control={Select} name="Status" label="Status" options={status} placeholder="Status" {...input} {...custom} /> 
    ); 
    } 

    submit(values, dispatch) { 
    console.log(values) 
    } 
    render() { 
    const { handleSubmit } = this.props; 
    return (
     <Transition animation="fade"> 
     <Modal trigger={<a className="cursor-pointer"> <Icon name="add" /> </a>} closeIcon> 
      <Header content='New Info'/> 
      <Modal.Content> 
      <Form onSubmit={handleSubmit(this.submit.bind(this))}> 
      <h3 className="ui dividing header">Basic Information</h3> 
       <Form.Group> 
       <Field name="Status" component={this.Status} /> 
       </Form.Group> 
       <Button type="submit" content='Submit Info' icon='add' labelPosition='right' color="green" /> 
      </Form> 
      </Modal.Content> 
      <Modal.Actions> 
      </Modal.Actions> 
     </Modal> 
     </Transition> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'NewInfo' 
})(NewInfoForm); 

フォームを送信するたびに、ドロップダウン値の1つを選択しても常に空のオブジェクトとして返されます。

Answer 1

Selectコンポーネントに、Reduxフォームの小道具（{...input}）で何をすべきかを理解するために、もっと手作業で作業する必要があると思われます。したがってたとえばの場合、onChangesignatureのSelectと1つのonChangeのRedux形式の署名の間の「翻訳」を行う必要があります。

Status({ input, meta: {touched, error}, ...custom }) { 
    const reduxFormOnChange = input.onChange; 

    // the signature for this onChange is specific to 
    // semantic-ui Select 
    const semanticSelectOnChange = (maybe, wrong, order, or, irrelevant) => { 
     // here we make the translation 
     // so that the Redux form onChange gets 
     // called correctly. 
     // (NOTE: this is an example, not actual code suggestion) 
     reduxFormOnChange(or, maybe); 
    }; 

    return (
     <Form.Field control={Select} 
     name="Status" label="Status" 
     options={status} placeholder="Status" 
     {...input} {...custom} 
     onChange={ semanticSelectOnChange } 
    /> 
    ); 
    } 

他のプロパティについても同様のプロセスが必要な場合があります。もちろん、Redux devtools (for Firefox or Chrome)のようなツールを使って、Reduxフォームが送出するアクションに期待するデータが含まれているかどうかを確認することもできます。