如何使用基于切换的 redux 使输入字段在切换时可编辑？

Question

问题是我想使用 Redux 并且基于 edit toggle (product.editable) 应该检查它是否文本是可编辑的。

但一切顺利，直到我想要编辑输入字段内的值。

我需要一个可以帮助我找到正确方向的人。我知道 JSON 不能直接修改，但我怎样才能更改当前值然后使其在输入字段内可编辑。请记住，我使用的是哑组件。

分量：

let getProductList = productList.map((product, i) => {
  return (
    <div key={i}>   
      {product.editable ?   
        <div>
          <input name="title" ref={(input) => title = input} value={product.title}/>
          <input name="description" ref={(input) => description = input} value={product.description}/>
        </div>
      : 
        <div>
          <div>{product.title}</div>
          <div>{product.description}</div>
      </div>}
      <ProductButtons productId={product._id} index={i}/>
    </div>
  ) 
});

export const ProductButtons = ({ productId, index}) => {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(deleteItem(productId, index))}>Delete</button>
      <button onClick={() => dispatch(editItem(productId, index))}>Edit</button>
      <button onClick={() => dispatch(addItem(productId))}>Add</button>
    </div>
  )
}

减速器：

case types.UPDATE_PRODUCT: {
  console.log('update')
  return {
    ...state,
    products: state.products.map((product, i) =>
      i == action.index
        ? {
            ...product,
            editable: product.editable == true ? false : true,
          }
        : product
    ),
  }
}

Answer 1

您可以尝试使用 inputfield 的 readonly 属性中的布尔值

<input readOnly={product.editable} />

Answer 2

我希望在编辑和查看模式之间切换对你有用。

现在如果你的问题是：

How to modify the product details (title, description, etc.) after a particular product item is in edit mode?

这里是你如何做到的：

将您的输入字段包装在 form 中，使用 defaultValue 而不是 value

uncontrolled

放置一个 input 类型 submit 的按钮（它可以让您通过在任何字段中点击 ENTER 来提交表单，如果你不想显示它，用 CSS 隐藏它：

<form onSubmit={this.handleSubmit}>
  <input
    name="title"
    ref={this.title}
    defaultValue={product.title}
    // value={product.title}
  />
  <input
    name="description"
    ref={this.description}
    defaultValue={product.description}
    // value={product.description}
  />
  <input
    type="submit"
    value="submit"
    className="display-none"
    style={{ display: 'none' }}
  />
</form>

和handleSubmit函数：

handleSubmit = (e) => {
  e.preventDefault()
  e.stopPropagation()

  // you can use event to read form field values
  console.debug(e.target.title.value)
  console.debug(e.target.description.value)

  // or use the element Ref you created 
  console.debug(this.title.current.value)
  console.debug(this.description.current.value)

  // Here, you can make API call or dispatch action to your redux to update the data
}

其他几点：

如果可能，请为 key 提供一些其他值而不是 index，例如产品编号
您可以在减速器中使用 editable: !product.editable 而不是 editable: product.editable == true ? false : true
如果可能，请使用 id 代替 index 查找要在减速器中更新的产品：~~(products.map((product, i) => i == action.index ?)~~
用===代替==比较，more on this

如何使用基于切换的 redux 使输入字段在切换时可编辑？

How to make input field editable on toggle with redux based on toggle?

reducers

reactjs

redux