Question

我很反应和减少。我使用react / redux创建了一个应用程序。我已经在应用程序中实现了路由，并且还能够使用redux来管理状态。现在我的问题是在设置状态后我只能在render（）中获取道具而不是组件中的任何位置。下面是我的代码，

cookies.txt

我想将值传递给下面的组件，但不是传递和获取值来渲染我想创建一个方法，并且只想在那里传递道具。

export class EmpSearch extends React.Component {

constructor(props) {
super(props);
this.state = {
    Empnumber: ''
};
}

EmpSearch = (e) => {    
 if (e.key === 'Enter') {
 browserHistory.push('/Emp/' + e.target.value); 
 }
 }

updateEmpNumber(e) {

 this.props.dispatch({
        type: 'UPDATE_EMP_NUMBER',
        payload: e.target.value
    });
   }

 render() {
   return (
     <div className="row">
    <form>
    <div className="form-group">
    <label htmlFor="Empnumber">Emp Number</label>
    <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.props.Empnumber} onChange={this.updateEmpNumber.bind(this)} onKeyPress={this.EmpSearch}/>
    </div>
</form>
</div>
 );
 }
  }
 function mapStateToProps(state){
  return {
Empnumber: state.Empnumber
 }
}

 export default connect(mapStateToProps)(EmpSearch);

我成功地能够在渲染中获取道具值但是无法正常运行。我已经尝试了很多来创建方法并将道具传递给方法并获得道具值但不能。请帮帮我。

Answer 1

问题是你没有绑定你的函数，因此函数this指的是函数的上下文。 componentDidMount或componentWillMount也只会被执行一次，因此只包含最终值

第二功能

class EmpDetail extends React.Component {
    constructor(props) {
          super(props);
          this.handleProp=this.handleProp.bind(this);


    }
    componentWillReceiveProps(nextProps) {
         this.handleProp(nextProps);
    }
    handleProp(props) {
          console.log('In function' + props.Empnumber);
          return props.Empnumber;
    }
    render() {
        const empNumber = this.props.Empnumber;
        return (
            <div className="container">
                Empnumber = {this.props.Empnumber}
            </div>
        );
    }
     }

     function mapStateToProps(state){
       return {
        Empnumber: state.Empnumber
     }
     }

    export default connect(mapStateToProps)(EmpDetail);

在方法react / redux中获取道具值

1 个答案: