如何为 recompose 的 withHandlers() 添加上下文？

Question

recompose 有一个名为 withHandlers 的函数，可让您在保持组件纯净的同时定义事件处理程序。

例如如果你内心有类似的东西render() 方法：

<TextInput value={value} onChange={ev => this.handleChange(ev.target.value)} />

它不会是纯粹的，因为每次您的组件渲染时，它都会通过将不同的 onChange 函数传递给您的 TextInput 组件。

这很好，但是如何扩展它以支持输入数组？或者以其他方式提供辅助数据？

例如以他们为例并对其进行一些扩展：

const enhance = compose(
    withState('values', 'updateValue', ''),
    withHandlers({
        onChange: props => inputName => event => {
            props.updateValue(inputName, event.target.value)
        },
        onSubmit: props => event => {
            event.preventDefault();
            submitForm(props.value)
        }
    })
)

const Form = enhance(({ value, onChange, onSubmit, inputs }) =>
    <form onSubmit={onSubmit}>
        <label>Value
            {inputs.map(input => (
                <TextInput value={value} onChange={onChange(input)} />    
            ))}
        </label>
    </form>
)

我稍微捏造了一些细节，但假装inputs 以输入名称数组的形式出现。例如["firstName","lastName"] 将呈现两个文本框，每个文本框一个。

我想在我的状态中存储每个这些值，但我不想为每个定义单独的更新器函数。因此，我需要将一些元数据附加到 onChange={...} 属性，以便我知道在我的状态下我正在更新哪个字段。

我该怎么做？

在我的示例中，我编写了onChange(input) 并在withHandlers.onChange 函数中添加了一个额外的“级别”以接受额外的参数，但withHandlers 实际上并不是这样工作的。有没有办法做到这一点 - 即确保每个TextInput 每次呈现<Form> 时接收相同的函数实例？

Answer 1

这是一个典型情况，您需要直接在 TextInput 组件中定义更改句柄。 您需要将 updateValue 函数作为道具传递给 TextInput 组件。