- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在子组件中将 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 做同样的事情。标准下拉菜单,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 值 onSubmit 中获得了值。然后我试图将 Dropdown 本身卸载到子组件(目的是使用语义 UI react 版本的 Dropdown,但首先要让 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
组件传递一个 onChange 函数作为 Prop :
<Opts
options={options}
name={input.name}
onChange={ (value:string) => input.onChange(value)}
/>
关于reactjs - 在子组件中使用 DropDown 的 React-Final-Form,如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55024727/
关闭。这个问题需要更多 focused .它目前不接受答案。 想要改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this q
1.final final修饰类,说明这个类不能被继承,是以个顶级类。 final修饰变量,说明这个变量是常量。 final修饰方法,表示这个方法不能被重写,不过可以冲在final方法。 比如有个
我喜欢使用 -Wsuggest-final-types 编译我的代码和 -Wsuggest-final-methods以便在可能使用 final 关键字以允许编译器更积极地优化的机会时收到警告。 不过
我在 Java 8 中有一个异步操作,它返回一个 onError 回调或一个 onSuccess 回调。如果操作成功与否,我需要在我的方法内部返回。所以我返回一个 boolean 值来说明这个信息。我
我正在阅读一些内容,需要对最终类和方法进行一些说明。我的理解是,将一个类声明为 final 会阻止该类被扩展。因此,是否有必要将最终类中的方法声明为最终的?在我看来,如果类不能扩展,则没有必要将方法声
有什么区别 try { // action A } catch(Exception e) { // action B } finally { // action C }
这个程序是我类(class)的最终作业,我无法弄清楚为什么我收到错误“从内部类引用的局部变量必须是最终的或有效的最终”。该程序正在运行并发线程来对# 数组进行排序,然后找到该数组的高值和低值。当我在没
C++11 added final. 终于! 我了解 final 做了两件事: 使类不可继承。 使类中的(虚拟)函数不可覆盖(在派生类中)。 这两者似乎是相互独立的。但以以下为例: class Foo
我想使用具有多个提交按钮的react-final-form构建表单,其中每个提交按钮在表单中设置不同的值。本质上,我想创建一个在呈现的HTML中看起来像这样的表单: Are you over 1
我想知道什么时候应该对变量和(或)方法使用静态、最终、静态最终参数。据我了解: final:类似于c++中的const参数。它基本上意味着值(或在方法中 - 返回值)不会改变。 静态:这意味着值(或方
我正在做一个编程类(class)项目,用于 400 行矩阵本身的矩阵乘法。我让它以顺序模式工作,该项目的目标是编写并行实现。 我有以下代码,当然,当我尝试引用内部类中的计数器 j 时,我收到一个关于
也许这是简单的问题,但我找不到答案。 声明为final的经典变量是否包含与非final变量不同的内存段? 最佳答案 我想说,谈到局部变量,基于 this answer 是不行的。 : The trut
考虑以下代码: #include class B { virtual void f() { std::cout << "Base" << '\n'; } }; class D
这个问题已经有答案了: java: Is it possible to set a lambda expression for an array of Buttons is a for loop? I
考虑这个代码片段 public class ConstantFolding { static final int number1 = 5; static final int numbe
我确定在内部类中访问的变量应该声明为final 或有效final。但在下面的情况下我很困惑。不知道是不是我理解错了。 public class MyClass { private boolea
我必须将一个 java.sql.Connection 对象传递给一个匿名内部类,这意味着我必须对它进行 final 引用。但是,我担心任何资源泄漏。 public static String foo(
我收到 SonarQube 错误:“强烈建议在此方法实现结束时调用 super.finalize(),以防父实现也必须释放一些系统资源。” 但我发现 Object 类没有实现 finalize方法。
我一般认为资源清理是在 finally block 中完成的, 最近我在一个类中发现了这个特定的代码片段,它覆盖了 Object 类'finalize()方法。 protected void fina
让我们在父类中使用这个方法: public void calculateSum(int a, final int b) { } 子类有: public void calculateSum(int a,
我是一名优秀的程序员,十分优秀!