Redux-Form은 표시 값과 사용자 정의 구성 요소에 제출 된 값을 분리합니다.

Question

저는 CurrencyBox라는 사용자 정의 구성 요소를 가지고 있고 redux-form을 사용하여 양식을 제출하고 유효성을 검사하며 "123,345", "1.000"과 같이 입력 된 내용을 완벽하게 처리합니다. 000 "또는"9.000,123 "등.

오늘 서버에 입력 값 (1000.000,456)을 (1000000,456)으로 보내야합니다. 123.456,789하지만 제출 된 값이 123456,789

이 처리하는 어쨌든 거기에 있어야합니다 같은 한마디로

가 표시 값이 있어야합니다.

노멀 라이저 등을 확인했지만, 이것들은 저에게 적합한 해결책은 아닙니다. 나는 단지 표시된 가치와 제출 된 가치를 분리하고 싶다.

감사합니다.

Answer 1

당신은 당신이 onChange, onFocus와 당신이 필요로하는 다른 콜백 설정에 몇 핸들러가 필요합니다, 예를 들어 텍스트 필드의 경우,이 구성 요소는 마스크와 실제 값을 받아야 입력 구성 요소에 대한 래퍼 구성 요소를 만들 필요가 예를 들어 :

const { string, func } = PropTypes; 

class TextField extends Component { 
    static propTypes = { 
    value: string, 
    onChange: func, 
    format: string, 
    }; 

    getFormat(value) { 
    // set the format that you need 
    // based on the format prop or any other option 
    return applyFormat(value); 
    } 

    handleChange = (event) => { 
    const value = event.target.value; 
    const { onChange } = this.props; 

    if (onChange) { 
     // Before returning the value 
     // you need to remove the format 
     onChange(removeFormat(value)); 
    } 
    } 

    render() { 
    const { value } = this.props; 

    return (
     <input 
     type="text" 
     value={this.getFormat(value)} 
     onChange={this.handleChange} 
     /> 
    ); 
    } 
} 

이 기본적으로 당신이 형식을 설정하고 onChange에 당신이 형식을 제거해야 값을 렌더링하기 전에, 당신이 무엇을 할 수 있는지의 아주 간단한 예를 들어, 당신은 onBlur 대신을 구현할 수 onChange,이 방법은 redux를 사용하는 경우 데이터가 감속기로 전송됩니다. 사용자가 편집을 완료 할 때까지 모든 키 입력시 감속기를 호출하지 못하도록합니다.

사용법 :

<TextField 
value={this.props.dataFromRedux} 
onChange={this.props.actionCreatorToSaveValueOnState} 
/> 

난이 도움이되기를 바랍니다!