Question

我正在尝试思考反应方式，但我无法找到有关如何调用表单组件的.submit()方法的解决方案。

我有一个 material-ui 对话框，我必须通过actions属性传递按钮。从这个动作组件，我想调用Form组件的.submit()方法，它是对话框的子组件。

我是否必须将formRef传递给Dialog以将其传递给Actions，我该怎么做？或者是否有 React方式 我错过了？

class FormDialog extends React.Component {
    render() {
        return (
            <Dialog actions={<Actions />} >
                <Form />
            </Dialog>
        )
    }
}

const Actions = (props) => {
    return (
        <FlatButton
            label="Submit"
            onTouchTap={() => formRef.submit()}
        />
    )
} 

const Form = () => {
    let formRef;
    return (
        <AutoForm 
            ref={ref => formRef = ref}
            onSubmit={doc => db.save(doc)} 
            >
        </AutoForm>
    )
}

Answer 1

提交表单的表单中的任何按钮都应为type="submit"，点击其中任何一个按钮都会触发<form />的{{1}}处理程序。没有必要传递参考文献。

这里有一些React-way说明：

如果你必须传递东西＆＃34; up＆＃34;然后回来＆＃34; down＆＃34;如果是组件树，您可能无法正确处理问题。
组件不应该在其他组件上调用方法。
除非您确实知道何时需要，否则只应在拥有ref的组件内引用DOM元素。

反应 - 将ref传递给父级

1 个答案: