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

양식을 제출할 때마다 드롭 다운 값 중 하나를 선택한 경우에도 항상 빈 개체로 반환됩니다.

Answer 1

Select 구성 요소가 전달하는 Redux 양식 소품 ({...input})으로 수행해야하는 작업을 이해하려면 좀 더 수동 작업이 필요할 수 있습니다. 따라서 예를 들어 일 경우 onChangesignature이 Select이고 하나가 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 양식에 의해 전달 된 작업에 예상되는 데이터가 포함되어 있는지 확인할 수도 있습니다.