如何添加上下文以重新组成withWithHandlers（）？

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实际上并不能以这种方式工作。 有什么方法可以做到这一点-即确保每次呈现<Form>时，每个TextInput接收相同的函数实例？

Answer 1

这是典型的情况，您需要直接在TextInput组件内部定义更改句柄。 您需要将updateValue函数作为对TextInput组件的支持。