1.デマンド機能：フォームはドラッグアンドドロップでき、クリックして編集できます。最初の2つは入力ボックスで、背面は追加または削除できるドロップダウン選択ボックスです。
以下に2つの実装方法を紹介します
1、
-
ant-designコンポーネントを表示すると、ドラッグアンドドロップと編集可能なテーブルが2種類のテーブルであることがわかります。したがって、私の実現のアイデアは、2つのタイプのテーブルの混合によって引き起こされる不確実な問題を回避することです。そこで、2つのテーブルを直接導入し、変数を使用して、領域で使用されるテーブルを制御します。
ドラッグアンドドロップが必要な場合はドラッグテーブルをレンダリングし、編集する場合は共通のデータを使用して編集テーブルをレンダリングします。 -
特定の実装コードは人によって異なります。ここでは、役立つと思われるコードのみを示します。
-
編集状態をレンダリングするときに、入力ボックスかドロップダウン選択ボックスかを区別します
renderCell = ({
getFieldDecorator }) => {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
} = this.props;
const len = dataIndex === 'courseName' ? 20 : 2;
return (
<td {
...restProps}>
{
editing ? (
<div>
{
inputType === 'select' ? (
<Select
mode="multiple"
allowClear
style={
{
width: '100%' }}
placeholder="请选择适用年级"
onChange={
this.handleChange}
defaultValue={
record.gradeEnumList}
>
{
constants.gradesData.map((item, inx) => {
return (
<OptGroup label={
item.label} key={
`${
inx * 3}`}>
{
item.children.map((item2, index2) => {
return (
<Option key={
DataUtils.generateKey(index2)} value={
item2.value}>
{
item2.grade}
</Option>
);
})}
</OptGroup>
);
})}
</Select>
) : (
<Form.Item style={
{
margin: 0 }}>
{
getFieldDecorator(dataIndex, {
rules: [
{
required: dataIndex === 'courseName', max: dataIndex === 'courseName' ? 20 : 2,
message: `${
title}限${
len}字内!`,
},
],
initialValue: record[dataIndex],
})
(this.getInput())}
</Form.Item>
)}
</div>
) : (
children
)}
</td>
);
};
需要注意的是：下拉选择框的默认值一定要对应value值的数据类型，需要匹配。
二、
- 同じコンポーネントで、変数を使用し
renderてテーブルのコンテンツを制御します - 例
render: (text, record) => {
return (
<div>
{
editCourseId === record.courseId && editCourseId !== '' ? (
<CustomSelected onRef={
(ref) => {
this.child = ref; }} value={
record.gradeEnumList} courseId={
editCourseId} />
) : text}
</div>
)
}
render: (text, record) => {
return (
<div>
{
editCourseId === record.courseId && editCourseId !== '' ? (
<CustomInput value={
record.courseShortName} max={
2} ref={
this.editShortName} />
) : text}
</div>
)
}
- 上記のコンポーネントは、通信
onRefに使用されましたref。2つの使い方については、ご自分で検索できます。 - 1.要約すると、onRefは、サブコンポーネントを呼び出すために使用される関数メソッドです。
- これは私がこの場合に使用した例です
父组件-----------------
使用
传入方式在上面渲染的地方代码
在需要调用的地方进行调用子组件的方法
const gradeEnumList = this.child.getValue();
子组件-----------------
componentDidMount() {
const {
onRef } = this.props;
if (onRef) {
onRef(this);
}
}
getValue = () => {
const {
value } = this.state;
return value;
}
- 2. React.createRef（）：子コンポーネントの値を取得するために使用され、子コンポーネントの変更された値は親コンポーネントで取得できます。
父组件--------------
this.editCourseName = React.createRef();
this.editShortName = React.createRef();
this.editGradeEnum = React.createRef();
引入方式如上面渲染代码所示
父组件访问使用
const shortName = this.editShortName.current.state.value;
const name = this.editCourseName.current.state.value;
子组件--------------------------
按自己正常的业务代码
如--
import React, {
Component } from 'react';
import {
Input } from 'antd';
class CustomInput extends Component{
constructor(props) {
super(props);
this.state = {
value: props.value,
}
}
onChange = (e) => {
this.setState({
value: e.target.value,
});
}
render() {
const {
value } = this.state;
const {
max } = this.props;
return <Input value={
value} placeholder="请输入" onChange={
this.onChange} maxLength={
max} />
}
}
export default CustomInput;
上記のコンポーネントの通信方法の詳細を自分で学ぶ必要があります。私はいくつかのコードスニペット、私の実装方法を共有しています。
