始める
React プロジェクトでは、UI フレームワーク ant-design を使用します。テーブル リストの各行には編集ボタンがあり、[編集] をクリックするとポップアップ モーダルが表示され、そこでフォーム フォームが使用され、データが ref でエコーされます。しかし、初めて [編集] をクリックしてポップアップ ウィンドウを開いたとき、ref によって取得される current は常に null であり、閉じて再度開くと正常に取得できることがわかりました。
解決
Modal にはレンダリングを強制する属性があります。
この属性を Modal に追加するだけです。
forceRender = {
true}
上記のすべてのコード:
import React, {
Component } from 'react';
import {
Form, Modal, Input } from 'antd';
class EditDialog extends Component {
constructor(props) {
super(props);
this.formRef = React.createRef();
this.state = {
visible: false,
}
}
showModal = (value) => {
this.setState({
visible: true
});
if(this.formRef.current){
this.formRef.current.setFieldsValue({
name: value.name,
age: value.age,
days:value.days
});
}
};
handleOk = e => {
this.setState({
visible: false,
});
};
handleCancel = e => {
this.setState({
visible: false,
});
};
onFinish = values => {
console.log('Success:', values);
};
onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
render() {
return (
<div>
<Modal
title="Basic Modal"
visible={
this.state.visible}
onOk={
this.handleOk}
onCancel={
this.handleCancel}
forceRender={
true}
>
<Form
name="basic"
ref={
this.formRef}
onFinish={
this.onFinish}
onFinishFailed={
this.onFinishFailed}
>
<Form.Item
label="姓名"
name="name"
rules={
[{
required: true, message: '请输入姓名!' }]}
>
<Input placeholder="请输入姓名" />
</Form.Item>
<Form.Item
label="天数"
name="days"
rules={
[{
required: true, message: '请输入天数!' }]}
>
<Input placeholder="请输入天数" />
</Form.Item>
<Form.Item
label="年龄"
name="age"
rules={
[{
required: true, message: '请输入年龄!' }]}
>
<Input placeholder="请输入年龄" />
</Form.Item>
</Form>
</Modal>
</div>
);
}
}
export default EditDialog;
問題解決プロセスをここに文書化します。不正確な箇所がありましたらご指摘ください。