2017-12-12 4 views
1

단일 입력 값을 검색하고 기록하려고합니다. 이것은 기존의 name value prop가있는 편집 양식입니다.redux-form 및 formValueSelector로 입력 양식 값을 검색하는 방법

어떤 이유로 든 입력란의 값으로 상태 '이름'을 설정하지 않습니다. 내 문제라고 생각하는 연결 부분을 어떻게 구조화할지 모르겠다. 특히, 비 형식 상태와 양식 상태를 모두 포함하도록 mapStateToProps를 작성하는 방법이 명확하지 않습니다.

부분 축소 코드 :

import { Field, reduxForm, formValueSelector } from 'redux-form'; 
import { connect } from 'react-redux'; 
import { updateStable } from '../../actions/index'; 

const selector = formValueSelector('myEditForm'); 

class EditStuff extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: this.props.name 
    }; 
    } 

    componentDidMount() { 
    this.props.initialize({ 
     name: this.props.name || '' 
    }); 
    } 

    componentDidUpdate() { 
    // this.state.name is not getting set from input value 
    this.props.updateLocalActiveStuffData(this.state.name); 

    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 

      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
      <Field 
       label="Name" 
       name="name" 
       class="name" 
       type="text" 
       component={renderField} 
      /> 

      <button type="submit" className="btn btn-primary"> 
       Submit 
      </button> 
      </form> 
     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    displayEditForm: state.displayEditForm, //my own non-form related state 
    name: selector(state, 'name') //form input 'name' 
    }; 
} 

export default connect(mapStateToProps, { updateStuff })(
    reduxForm({ 
    form: 'myEditForm' 
    })(EditStuff) 
); 

답변

0

당신이 reduxForm과 formValueSelector 이름 양식의 이름이 다르기 때문에 그것의 값을 검색 할 수 있는지 생각 'StableEditForm' != 'myEditForm'
You have more info on selectors here


양식을 값으로 초기화하려면 mapStateToProps의 상태에서 initialValues 소품으로 설정해야합니다.

A great exemple here

function mapStateToProps(state) { 
    return { 
    initialValues: state.displayEditForm, // value of your form 
}; 
} 

나는 이것이 당신

+0

양식 이름 차이가 복사/붙여 넣기 오타 -I 편집 질문이었다 도움이 될 수 있기를 바랍니다. initialValues를 설정하는 권장 방법을 확인하겠습니다. –