Question

我创建了一个Create-React-App反应应用程序＆amp;终极版。

我使用connect将userReducer映射到状态（通过mapStateToPrope），即：

function mapStateToProps({ userProfile }) {
return { userProfile: userProfile ? userProfile : null };
}

export default connect(mapStateToProps, fetchUserProfile)(Profile);

我有一个输入，我将UserProfile Firstname绑定到：

render(){
   return (
    <div>
       <input type="text" value={this.props.userProfile.firstName} />
   </div>
 ) 
}

这个问题现在我把它绑定到道具，我无法改变它，如果我输入输入它就不会改变输入内的文字..

如果我添加一个onChange = {updateValue}方法，并尝试更新道具它不会工作，因为组件无法更新自己的道具。

这样就可以将道具转移到州。

constructor(props){
    super(props);
    this.state = { FirstName : this.props.userProfile.firstName }
}

这是从道具获取初始值的推荐方法吗？

Answer 1

您尝试使用受控输入而不提供有关更新状态的信息。

如果您只想提供初始状态，可以使用输入字段的defaultValue属性。

<input defaultValue={this.props.value} />

通过这种方式，您可以轻松更改输入值，而无需书面开销。

但是，如果要更新组件，则应使用组件状态（就像在onChange示例中所做的那样）或使用redux状态，如果要为输入组件提供更多组件的输入值

const Component = ({ firstname, updateFirstname }) => (
  <input
    onChange={updateFirstname}
    value={firstname}
  />
);

const mapStateToProps = state => ({
  firstname: state.profile.firstname,
});

const mapDispatchToProps = dispatch => ({
  updateFirstname: e => dispatch({ type: 'UPDATE_FIRSTNAME', firstname: e.target.value }),
});

connect(mapStateToProps, mapDispatchToProps)(Component);

Answer 2

为了在本地状态或redux中进行管理更改，您需要调用函数onChange，如下所示

onChange={(e) => this.updateField('fieldName',e.target.value,e)}

当道具（或状态更新）

时，值字段将会并且将始终更新

value={this.props.fieldName}

或

value={this.state.fieldName}

你的onChange函数可以调用setState（{fieldName：value}）来设置本地状态，也可以调度到redux来更新存储，转向会通过mapStateToProps函数更新本地状态。

Answer 3

对于受控组件，这样做没有错。但是你犯的一个错误是构造函数中没有this.props。您使用props变量将道具直接传递给构造函数。所以代码将是

this.state = {
  FirstName: props.userProfile.firstName
};

但是如果你希望稍后在组件上更新商店中的值，那么请声明componentWillReceiveProps()并在那里设置状态值，以便在此处捕获商店中的更改。

将道具转移到州的正确方法（如果需要）React＆amp;终极版

3 个答案: