在子组件中使用 DropDown 的 React-Final-Form,怎么样?
React-Final-Form with DropDown in Child Component, how?
我正在尝试在子组件中使用 React-final-form 和 DropDown。
无法正常工作。
我所有的文本字段都已经在一个子组件中,这非常有用。
父级中的字段如下所示:
<Field
name="lastName"
placeholder="Last Name"
validate={required}
>
{({input, meta, placeholder}) => (
<MyField meta={meta} input={input} placeholder={placeholder}/>
)}
</Field>
子组件如下所示:
export const MyField = (props) => {
return (
<Form.Field className={props.meta.active ? 'active' : ''}>
<Label>{props.label ? props.label : props.placeholder}</Label>
<Form.Input
{...props.input}
placeholder={props.placeholder}
className={(props.meta.error && props.meta.touched ? 'error' : '')}
/>
</Form.Field>
)
};
"Form.Field" 和 "Label" 来自 semantic-ui-react
但现在我想对 DropDown 做同样的事情。
标准的 DropDown,taken from an example on the React-Final-Form site,看起来像这样:
<Field name="toppingsA" component="select">
<option value="chicken">Chicken</option>
<option value="ham">Ham</option>
<option value="mushrooms">Mushrooms</option>
<option value="cheese">Cheese</option>
<option value="tuna">Tuna</option>
<option value="pineapple">Pineapple</option>
</Field>
从某种意义上说,它的工作原理是我在提交时获得了我的 react-final-form 值中的值。
然后我试图将 Dropdown 本身卸载到子组件(目的是使用 Dropdown 的语义-ui-react 版本,但首先要让 Dropdown 工作:-))
父组件:
const eatOptions = [
{key: 'c', text: 'Chicken', value: 'chicken'},
{key: 'h', text: 'Ham', value: 'ham'},
{key: 'm', text: 'Mushrooms', value: 'mushrooms'},
{key: 't', text: 'Tuna', value: 'tuna'}
];
// And in the Form:
<Field name="toppingsB" component="select" options={eatOptions}>
{ ({input, meta, options}) => {
return (
<Opts options={options} name={input.name}/>
)
}}
</Field>
在子组件中:
export const Opts = (props) => {
return (
<select name={props.name}>
{props.options.map((x) => {
return (
<option key={x.key} value={x.value}>{x.text}</option>
)
})}
</select>
)
};
结果是 HTML 看起来一样(我猜这并没有说明多少),ToppingsA 在值中被拾取(在 onSubmit 上)而 ToppingsB 不是。
我不知道我在这里遗漏了什么,非常感谢您的帮助。
提前致谢,
伯特
如果您对 toppingsB 使用 render-props,则 Field component
道具不应为 "select" 类型,因为 Field 的子项将是一个函数,而不是多个标签。
您似乎还没有让您的表单知道子组件内部发生的任何更改。尝试将 Opts
组件作为 prop 传递一个 onChange 函数:
<Opts
options={options}
name={input.name}
onChange={ (value:string) => input.onChange(value)}
/>
@S.Taylor,感谢您的帮助!!有效。
作为参考工作代码:
父组件中的字段:
<Field name="toppingsB" options={eatOptions} >
{ ({input, meta, options}) => {
return (
<Opts
options={options}
name={input.name}
onChange={ (value) => input.onChange(value)}
/>
)
}}
</Field>
子组件中的代码:
export const Opts = (props) => {
return (
<select name={props.name} onChange={props.onChange}>
{props.options.map((x) => {
return (
<option key={x.key} value={x.value}>{x.text}</option>
)
})}
</select>
)
};
我正在尝试在子组件中使用 React-final-form 和 DropDown。 无法正常工作。
我所有的文本字段都已经在一个子组件中,这非常有用。 父级中的字段如下所示:
<Field
name="lastName"
placeholder="Last Name"
validate={required}
>
{({input, meta, placeholder}) => (
<MyField meta={meta} input={input} placeholder={placeholder}/>
)}
</Field>
子组件如下所示:
export const MyField = (props) => {
return (
<Form.Field className={props.meta.active ? 'active' : ''}>
<Label>{props.label ? props.label : props.placeholder}</Label>
<Form.Input
{...props.input}
placeholder={props.placeholder}
className={(props.meta.error && props.meta.touched ? 'error' : '')}
/>
</Form.Field>
)
};
"Form.Field" 和 "Label" 来自 semantic-ui-react
但现在我想对 DropDown 做同样的事情。 标准的 DropDown,taken from an example on the React-Final-Form site,看起来像这样:
<Field name="toppingsA" component="select">
<option value="chicken">Chicken</option>
<option value="ham">Ham</option>
<option value="mushrooms">Mushrooms</option>
<option value="cheese">Cheese</option>
<option value="tuna">Tuna</option>
<option value="pineapple">Pineapple</option>
</Field>
从某种意义上说,它的工作原理是我在提交时获得了我的 react-final-form 值中的值。 然后我试图将 Dropdown 本身卸载到子组件(目的是使用 Dropdown 的语义-ui-react 版本,但首先要让 Dropdown 工作:-))
父组件:
const eatOptions = [
{key: 'c', text: 'Chicken', value: 'chicken'},
{key: 'h', text: 'Ham', value: 'ham'},
{key: 'm', text: 'Mushrooms', value: 'mushrooms'},
{key: 't', text: 'Tuna', value: 'tuna'}
];
// And in the Form:
<Field name="toppingsB" component="select" options={eatOptions}>
{ ({input, meta, options}) => {
return (
<Opts options={options} name={input.name}/>
)
}}
</Field>
在子组件中:
export const Opts = (props) => {
return (
<select name={props.name}>
{props.options.map((x) => {
return (
<option key={x.key} value={x.value}>{x.text}</option>
)
})}
</select>
)
};
结果是 HTML 看起来一样(我猜这并没有说明多少),ToppingsA 在值中被拾取(在 onSubmit 上)而 ToppingsB 不是。 我不知道我在这里遗漏了什么,非常感谢您的帮助。
提前致谢, 伯特
如果您对 toppingsB 使用 render-props,则 Field component
道具不应为 "select" 类型,因为 Field 的子项将是一个函数,而不是多个标签。
您似乎还没有让您的表单知道子组件内部发生的任何更改。尝试将 Opts
组件作为 prop 传递一个 onChange 函数:
<Opts
options={options}
name={input.name}
onChange={ (value:string) => input.onChange(value)}
/>
@S.Taylor,感谢您的帮助!!有效。
作为参考工作代码:
父组件中的字段:
<Field name="toppingsB" options={eatOptions} >
{ ({input, meta, options}) => {
return (
<Opts
options={options}
name={input.name}
onChange={ (value) => input.onChange(value)}
/>
)
}}
</Field>
子组件中的代码:
export const Opts = (props) => {
return (
<select name={props.name} onChange={props.onChange}>
{props.options.map((x) => {
return (
<option key={x.key} value={x.value}>{x.text}</option>
)
})}
</select>
)
};