来自动态生成的表单的 Redux 值

Question

我正在做一个使用 react 和 redux 的应用程序，我想做一些动态形式，尝试生成输入块，比如待办事项列表应用程序，这是一个例子：

<ul>
    <li>   
        <input type="text" ref="title" name="title" placeholder="title" autofocus/>
   </li>
   etc...
</ul>

但我不知道如何获取这些输入的值，在 Redux 中执行此操作的最佳方法是什么？我使用 ref 做了很多测试，但是因为我的输入是动态添加的，所以我不知道如何实现这个，你能帮我吗？

Answer 1

除非绝对必要，否则不要使用 refs！我能想到的唯一用例是聚焦它们，或者做一些晦涩的 DOM 事情。

为此，只需执行以下操作即可：

class DynamicInputs extends React.Component {
  doSomethingWithValue(item, newValue) {
    // Here you can dispatch an action to update the value, etc.
  }
  
  renderItems() {
    this.props.items.map( item => {
      return (
        <input 
          value={item.value} 
          onClick={ev => this.doSomethingWithValue(item, ev.target.value)}
      );
    })
  }

  render() {
    return <div>{this.renderItems()}</div>
  }
}

这个想法是 items 存在于你的 redux 商店中，并作为道具传递给这个组件。然后，您可以分派操作来更改 doSomethingWithValue 方法中的那些项目。该方法传递项目以便您可以识别它，并传递新值以便您更新它。

如果您希望能够添加待办事项，只需分派一个将新项目推送到 items 数组的操作即可:)

Answer 2

import React, { Component, PropTypes } from 'react'

export default class DynamicsInputs extends Component {

    doSomethingWithValue(item, newValue) {
        // Here you can dispatch an action to update the value, etc.
        console.log("item")
        console.log(item)
        console.log("newValue")
        console.log(newValue)
    }

    renderItems() {
        return (
            <div>
                {this.props.items.map( item =>
                <input
                    value={item.value}
                    onClick={ev => this.doSomethingWithValue(item, ev.target.value)}/>

                )}
            </div>
        );
    }

    render() {
        return (

            <div>
                {this.renderItems()}
            </div>
        );
    }
}

DynamicsInputs.propTypes = {

};

语法中有一些小错误，但这个版本对我有用，谢谢

来自动态生成的表单的 Redux 值

Redux values from a form generated dynamically

reactjs

redux