时间戳

首页 > 解决方案 > 当 React + Redux 的状态改变时，输入的值没有改变

javascript - 当 React + Redux 的状态改变时，输入的值没有改变

问题描述

你能帮我解决这个问题吗？我需要有一个输入从 redux 状态下的属性“cantidad”读取他的值，因此，当“cantidad”属性更改时，输入值也会更改，我实现了更改 redux 状态上的“cantidad”，但没有在组件本身上。这应该很简单，但我无法完成 id。

我的状态：

carrito: {
    articulosEnCarrito: [
      {
        id: '3937',
        cantidad: 15
      }
    ],
    total: 0
  },

我的组件：

const ControlDeCantidades = props => {

const handleAumentarCantidad = id => {
   props.agregarACarrito(id);
};

const articulo = props.articulosEnCarrito.find(
  articulo => articulo.id === props.idDeArticulo
);

return (
<div>
   <button type="button" onClick={e => {
    e.preventDefault();
    handleReducirCantidad(props.idDeArticulo);
   }}
   >
   <input type="number" defaultValue={articulo.cantidad} />
</div>
 );
};

const mapStateToProps = state => {
  return {
    articulosEnCarrito: state.carrito.articulosEnCarrito
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ControlDeCantidades);

我希望当 redux 状态上的“cantidad”值发生变化时输入的值会发生变化

标签： javascriptreactjsreact-redux

解决方案

这是一个完全受控输入的例子。

const Input = () =>{
    const [value, setValue] = useState('')
    return(
        <input value={value} onChange={e => setValue(e.target.value)} />
    )
}

只是将值传递给输入而没有更新它的方法会使输入受控和不受控，您应该提供一个回调来更新值。使用类：

class Input extends React.Component{
    state ={ value: ''}
    onChangeHandler = e => this.setState({value: e.target.value})

    render(){
        return(
            <input value={this.state.value} onChange={this.onChangeHandler} />
        )
    }
}

推荐阅读