react input组件问题

Question

自己封装了一个React input组件,这里封装成了函数式组件。并没有使用state。

代码

父组件中调用

页面效果

问题:
如图红色方框所示,在点击X之后想让input清空,可是在控制台里父组件确实更新了，而且link也变成了‘’,可是input里并没有置空....

Answer 1

input显示的值并没有根据props中传递的value值进行设置，defaultValue只是设置默认值，当input中输入值后，就不再起作用。正确的写法：

<input
    type="text"
    className="app-input"
    value={value}
    onBlur=...
    onChange=...
    ...
/>

顺便提醒下，以后提问，代码最好不要用截图，用文本，方便回答问题的人复制。

Answer 2

谢邀，没看到 input 清空 value 的代码呢。