Question

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

e.g。如果你在render()方法中有这样的东西：

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

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

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

e.g。以他们的榜样并将其扩展一点：

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)并添加了一个额外的＆＃39;级别＆＃39;到withHandlers.onChange函数接受额外参数，但withHandlers实际上并没有这样做。有没有办法做到这一点 - 即，确保每次TextInput每次<Form>收到相同的函数实例？

Answer 1

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

如何使用Handlers（）重新组合上下文？

1 个答案: