如何添加上下文以重构的 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 函数添加了一个额外的 'level' 以接受额外的参数，但 withHandlers 实际上不起作用方法。有什么方法可以做到这一点——即确保每个 TextInput 每次呈现 <Form> 时都接收到相同的函数实例？

Answer 1

这是您需要直接在 TextInput 组件内定义更改句柄的典型情况。您需要将 updateValue 函数作为 prop 传递给 TextInput 组件。

如何添加上下文以重构的 withHandlers()？

How to add context to recompose's withHandlers()?

reactjs

recompose