redux 저장소에서 입력 필드의 값을 직접 입력하십시오.

입력 필드 값을 절약 저장소 값으로 설정할 수 있습니까? 아니면 소품을 내 지역 주에 복사해야합니까?redux 저장소에서 입력 필드의 값을 직접 입력하십시오.

<input 
     placeholder={props.placeholder} 
     value={props.value} 
/>

react-redux의 연결에서 props.value가옵니다.

하지만 입력의 값을 변경할 수 없습니다, 나는 소품은

출처

2017-05-22 PranavPinarayi

당신은 내 대답을 본 적이 있습니까? 도움이 되었습니까? 만약 당신이 그것을 upvote 및 대답으로 표시하는 경우 그래서 그것을 감사하겠습니다. –

당신이 맞습니다, 그런 식으로 값을 설정할 수 있습니다 읽기 때문입니다 생각합니다. 이러한 입력 값을 변경하면 (체크 doc about controlled form fields 반응) 돌아 오는 점에서 작업 갱신 대응하는 값을 전달한다 onChange 이벤트 핸들러를 추가해야한다 :

<input 
     placeholder={props.placeholder} 
     onChange={(event) => props.updateValueInRedux(event.target.value)} 
     value={props.value} 
/>

를 상기 예에서 updateValueInRedux가 돌아 오는로부터 부품에 전달 함수이어야 connect은 mapDispatchToProps 속성으로 Redux 상태를 업데이트하는 작업을 전달합니다. 그것은처럼 보일 것입니다 :

const mapStateToProps = { 
    ... 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     updateValueInRedux: (value) => { 
      dispatch(someReduxUpdateAction(value)); 
     } 
    } 
}; 

const MyConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(MyComponent);

출처

2017-05-22 15:57:17

이 Bartek 말한에 추가하려면, 액션은 다음과 같이 수 :

//Action Creator 
 
export const UPDATE_VALUE = 'UPDATE_VALUE'; 
 

 
export function updateValueInRedux(value) { 
 
    return ({ 
 
    type: UPDATE_VALUE, 
 
    payload: value 
 
    }); 
 
} 
 

 
//Reducer 
 
import { 
 
    UPDATE_VALUE 
 
} from './actions'; //[Or directory where your actions reside] 
 

 
const INITIAL_STATE = { 
 
    value: '' 
 
} 
 
export default 
 
const UpdaterReducer = (state = INITIAL_STATE, action) { 
 
    switch (action.type) { 
 
    case UPDATE_VALUE: 
 
     return { ...state, 
 
     value: action.payload 
 
     } 
 
    default: 
 
     return state; 
 
    } 
 
} 
 

 
//Now 'value' will be available to all components that have the reducer state mapped to their properties

출처

2017-05-22 16:14:25

redux 저장소에서 입력 필드의 값을 직접 입력하십시오.

답변

관련 문제