Reactjs 在Redux中连接输入字段的正确方法是什么

我在Redux应用程序中为recipes提供了以下组件，为了简单起见，它目前只有一个名称

class RecipeEditor extends Component {

    onSubmit = (e) => {
        e.preventDefault()

        this.props.updateRecipe(this.props.recipe, { name: this.refs._name.value })
    }

    render = () => {
        if (!this.props.recipe) {
            return <div />
        }

        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <label>Name: </label>
                    <input type="text" ref="_name" value={this.props.recipe.name} />
                    <input type="submit" value="save" />
                </form>
            </div>)
    }

    static propTypes = {
        recipe: React.PropTypes.shape({
            name: React.PropTypes.string.isRequired
        })
    }
}

这更接近于我所寻找的行为，但现在它只在装入控件时设置配方，并且在选择新配方时不再更新

---

解决方案是否在每个设置状态的输入字段上都有一个处理程序，然后在“提交”中，获取所有状态并更新配方？

当您使用具有

值

属性集的输入元素时，它将成为一个“受控”组件。有关更详细的说明，请参见本页：

)

长话短说，这意味着在每次渲染时，您都将value属性设置为道具中的值，除非您还更新了redux存储中的值，否则将保持不变）

当输入为“非受控”时（值属性未显式设置），其内部状态（值字符串）由浏览器隐式处理

如果出于某种原因，您希望将状态保留在本地，并且不希望在每次值随onChange更改时都分派redux操作，您仍然可以使用React component state自己管理状态，并在提交时分派操作：

class RecipeEditor extends Component {

    state = {
        recipeName: ''
    }

    onSubmit = (e) => {
        e.preventDefault()

        this.props.updateRecipe(this.props.recipe, { name: this.state.recipeName })
    }

    handleNameChange = (e) => {
        this.setState({ recipeName: e.target.value })
    }

    render = () => {
        if (!this.props.recipe) {
            return <div />
        }

        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <label>Name: </label>
                    <input type="text" ref="_name" value={this.state.recipeName} onChange={this.handleNameChange} />
                    <input type="submit" value="save" />
                </form>
            </div>)
    }

    static propTypes = {
        recipe: React.PropTypes.shape({
            name: React.PropTypes.string.isRequired
        })
    }
}

类RecipeEditor扩展组件{ 状态={ recipeName:' } onSubmit=（e）=>{ e、 预防默认值（） this.props.updateRecipe（this.props.recipe，{name:this.state.recipeName}） } handleNameChange=（e）=>{ this.setState（{recipeName:e.target.value}） } 渲染=（）=>{ 如果（！this.props.recipe）{ 返回 } 返回( 姓名： ) } 静态类型={ 配方：React.PropTypes.shape({ 名称：React.PropTypes.string.isRequired }) } } 在本例中，只要输入值发生更改，您就会将当前值存储在状态中。调用

setState

会触发一个新的渲染，在这种情况下，它会将该值设置为更新后的值

最后，请注意，如果不需要将输入值设置为特定值，则不必使用

onChange

。在这种情况下，您可以删除

值

属性，只需使用

refs

。这意味着，如果您在代码的其他地方更改了存储在Redux状态中的值，您将看不到输入中反映的更改。如您所见，您仍然可以使用

intitalValue

将初始值设置为特定的值，它只是不会与您的redux存储同步。

---

但是，如果您想重复使用同一表单来编辑商店中现有的配方，那么这将无法正常工作。

正如控制台中已经提到的，您必须提供一个“onChange”侦听器以使该字段可编辑

这背后的原因是您提供的输入字段的value属性

{this.props.recipe.name}

在输入字段中键入时，此值不会更改。 因为这不会改变，所以在输入字段中看不到新值。（这使您觉得它是不可编辑的。）

这里需要注意的另一件事是，“recipe.name”应该被转移到组件的状态，这样您就可以在“onChange”侦听器中设置一个新的状态

---

请参阅“setState”函数的用法。

这与我的预期相符。。。但我希望这不是真的。对于一个可能有多个字段的表单来说，这似乎是一个很大的开销。您实际上不必使用

value

和

onChange

，但您失去了通过Redux控制表单中数据的能力。但有时这也没关系，这取决于你的需要。

{this.props.recipe.name}