最終フォームを使用して、サードパーティの入力コンポーネントがあります。私はそれ用のアダプターを書きました。バリデーターもありますが、meta.touched
常に false です。onFocus イベントを入力まで伝播しようとしましたが、うまくいきません。私は何を間違っていますか?
const requiredValidator = value => (value ? undefined : 'is required');
const FloatingLabelInputAdapter = ({ input, meta, ...rest }) => (
<FloatingLabelInput
{...rest}
onChange={(event) => input.onChange(event)}
onFocus={(event) => input.onFocus(event)}
errorText={meta.touched ? meta.error : ''}
/>
)
// used like this:
<Field
component={FloatingLabelInputAdapter}
label="Email"
name="email"
type="text"
validate={requiredValidator}
/>
// and here's the render() of the component
render() {
const { children, label } = this.props;
const { focussing, used } = this.state;
console.log('FloatingLabelInput.props', this.props);
return (
<Group {...this.props} >
<TextInput
focussing={focussing}
innerRef={(comp) => { this.input = comp }}
onFocus={this.onFocusHandle}
onBlur={this.onBlurHandle}
onChange={this.onChange}
type={this.props.type} />
<Label
focussing={focussing}
used={used}>
{label}
</Label>
<Bar focussing={focussing} />
</Group>
);
}
}