2017-09-14 1 views
-1

반응을 사용할 때 redux를 통해 명확한 필드에서 어떻게 연결될 수 있는지 알고 싶습니다. 예를 들어, 일부 샘플 코드가있는 양식이 있습니다. Redux/React에서 입력 설정/지우기

<Field component={datewidget} id ="date" name="date" type="date" label="date" /> 
<button type="button"onClick={() => {(clearMyInput());}}> 
</button> 

함수 clearMyInput

가 전달되도록 하나는 단순히 버튼을 클릭하고 없음으로 입력 값을 설정하여 입력 필드를 취소 할 수있는 방법

const mapDispatchToProps = (dispatch) => { 
    return { 
    clearMyInput:() => { 
     return dispatch(clearDate(datedata,value)); 
    } 
    } 
} 

내 질문. 내가 하나가이 사용 REDUX 양식을 할 수있는 방법을 알고 싶습니다

$("#button").click(function() { 
    $("#date").val(""); 
}); 

반응 :

JQuery와 예를 들어, 나는 이런 식으로 뭔가를 쓸 수 있습니다.

+0

양식 입력을 redux에 저장해야합니까? 일반적으로 제출할 때까지 필드 또는 로컬 구성 요소 상태로 사용자 입력을 유지하는 것이 좋습니다. 다른 구성 요소가 응답 할 수 있도록 redux를 사용해야하는 경우 redux 상태에서 입력 값을 설정해야하므로 디스패치로 해당 상태를 지우면 입력 값도 지워집니다. (또는 단지 필드에'ref'를주고'refs.myInput.value = '''를 사용하여 그것을 지우십시오) – glortho

+0

당신이 요구하는 것이 맞는지는 모르겠지만, 반응하는 redux reducer가 누락 된 것처럼 들립니다 'clearDate' 액션으로 넘어갑니다. 일반적으로 (로컬 상태 대신에 redux를 사용하는 경우) 저장소의 값을'connect'를 통해 구성 요소에 바인딩 한 다음'clearMyInput' 액션을 디스패치합니다. 감속기는 상점에서 해당 값을 재설정하여 응답하며, 이는 양식의 값을 재설정합니다 .... – mikebridge

+0

'clearDate (datedata, value)'-이 값의 출처는 어디입니까? 'clearMyInput : (datedata, value) => {'? –

답변

3

Field의 구성 요소에서 상점의 속성 value을 전달하고 이벤트 처리기를 연결하여 변경 사항을 전달하십시오.

<Field 
    component={datewidget} 
    id="date" 
    name="date" 
    type="date" 
    label="date" 
    value={this.props.fieldValue} 
    onChange={this.props.changeFieldValue} 
/> 

그런 다음 clearDate 기능을 파견하여, 당신은 단지 '' 모든 형태의 값을 설정해야합니다. 나는 이것을 보일러 플레이트없이 모두 수행하는 Redux Form을 조사 할 것을 권한다.

0

나는 양식을 지울가 내장되어 기능이 기존의 대답에 보충 교재로 추가 하시겠습니까 : 여기

<button type="button" onClick={reset}> 
     Clear Values 
    </button> 

을 주목 {reset}onClick 액션 핸들러를. 이 상자에서 나온다 Redux-Form