Question

我可以将输入字段值设置为redux存储值吗？或者我可能需要将道具复制到我当地的州吗？

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

props.value来自react-redux的Connect。

但是我无法改变输入值，我认为这是因为道具是只读的

Answer 1

您可以通过这种方式设置价值，这是正确的。要更改此类输入值，您必须添加onChange事件处理程序，该处理程序将在Redux存储中调度更新相应值的操作（检查React doc about controlled form fields）：

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

在上面的示例中，updateValueInRedux应该是从Redux connect传递给组件的函数，作为mapDispatchToProps参数的属性，它将调度更新Redux状态的操作。看起来应该是这样的：

const mapStateToProps = {
    ...
}

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

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

Answer 2

为了补充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

直接从redux store

2 个答案: