javascript - react 新表单，设置输入值和焦点字段

Question

所以我想要做的是将用户名字段的值重置为 '' 并聚焦它(当我收到从服务器发回的错误时)。

// get the form ref
var form = this.refs.loginForm.getForm();
// reset username field value (this actually gets updated if i check 
// it in the console but the UI won't re-render
form.updateData({username: ''}, {validate: false})
// focus the username input (ofc doesnt work at all)
form.fields.username.focus();

Answer 1

焦点部分取决于您渲染表单的方式，因为您需要访问真实的 DOM 节点才能执行此操作。如果您手动渲染它，您可以传递 ref渲染此字段时:

form.boundField('username').render({attrs: {ref: 'username'}})

然后你可以做 React.findDOMNode(this.refs.username).focus()当您需要聚焦该领域时。

如果另一个 React 组件正在为您渲染表单，例如 <RenderForm> ，目前还没有办法获取最终为每个输入渲染的实际 DOM 节点。 There's an open issue for this .

<小时/>

数据更新代码应该可以工作，如 form.updateData()应该强制包含表单的组件进行更新。你能提供一个可行的例子吗？