Что я делаю, так это то, что я отображаю данные в таблице ant design, и каждый столбец каждой строки теперь можно редактировать, когда отображаются неверные данные, например, электронная почта имеет неправильный формат, и должно быть сообщение о проверке, чтобы электронная почта была недопустимо, и когда пользователь начинает печатать, мне также нужно проверить ввод пользователя, который был для редактирования. например, когда пользователь начинает печатать, мне также нужно проверять каждое изменение ввода, будь то правильный адрес электронной почты или неправильный, аналогично, мне нужно использовать пользовательское регулярное выражение для каждого столбца строки, я надеюсь, что я старался изо всех сил, чтобы решить проблему, что я облицовка.
То, что я пытался сделать так, гораздо ниже.
1 - Когда данные отображаются в таблице, я получаю два редактируемых столбца для каждой строки. Данные отображаются
2 - Когда пользователь начинает редактирование Редактирование пользователя
3 - Проверка не пройдена, когда текстовое поле пусто, моя цель состоит в том, чтобы также проверяйте каждое нажатие клавиши, либо адрес электронной почты правильный, либо нет, который вводится, когда исчезает ошибка прохода проверки. Проверка не пройдена
Ниже приведен код, который я пытался выполнить до сих пор
import React, { useContext, useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Popconfirm, Form } from "antd";
const EditableContext = React.createContext();
const EditableRow = ({ index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={form} component={false}>
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
</Form>
);
};
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
...restProps
}) => {
const [editing, setEditing] = useState(false);
const inputRef = useRef();
const form = useContext(EditableContext);
useEffect(() => {
if (editing) {
inputRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
form.setFieldsValue({
[dataIndex]: record[dataIndex]
});
};
const save = async e => {
try {
const values = await form.validateFields();
toggleEdit();
handleSave({ ...record, ...values });
} catch (errInfo) {
console.log("Save failed:", errInfo);
}
};
let childNode = children;
if (editable) {
childNode = editing ? (
<Form.Item
style={{
margin: 0
}}
name={dataIndex}
rules={[
{
required: true,
message: `${title} is required.`
}
]}
>
<Input ref={inputRef} onPressEnter={save} onBlur={save} />
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={{
paddingRight: 24
}}
onClick={toggleEdit}
>
{children}
</div>
);
}
return <td {...restProps}>{childNode}</td>;
};
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
title: "name",
dataIndex: "name",
width: "30%",
editable: true
},
{
title: "age",
dataIndex: "age",
editable: true
},
{
title: "address",
dataIndex: "address"
},
{
title: "operation",
dataIndex: "operation",
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<Popconfirm
title="Sure to delete?"
onConfirm={() => this.handleDelete(record.key)}
>
<a>Delete</a>
</Popconfirm>
) : null
}
];
this.state = {
dataSource: [
{
key: "0",
name: "Edward King 0",
age: "32",
address: "London, Park Lane no. 0"
},
{
key: "1",
name: "Edward King 1",
age: "32",
address: "London, Park Lane no. 1"
}
],
count: 2
};
}
handleDelete = key => {
const dataSource = [...this.state.dataSource];
this.setState({
dataSource: dataSource.filter(item => item.key !== key)
});
};
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1
});
};
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
this.setState({
dataSource: newData
});
};
render() {
const { dataSource } = this.state;
const components = {
body: {
row: EditableRow,
cell: EditableCell
}
};
const columns = this.columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: this.handleSave
})
};
});
return (
<div>
<Button
onClick={this.handleAdd}
type="primary"
style={{
marginBottom: 16
}}
>
Add a row
</Button>
<Table
components={components}
rowClassName={() => "editable-row"}
bordered
dataSource={dataSource}
columns={columns}
/>
</div>
);
}
}
ReactDOM.render(<EditableTable />, document.getElementById("container"));
ССЫЛКА НА КОДОВОЙ ОТЧЕТ *
МОЯ ЦЕЛЬ:
1 - Когда данные отображаются, мне нужно проверить их, как если бы адрес электронной почты был неправильным, тогда этот недействительный адрес будет действительным.
2 - Когда пользователь начнет вводить, он проверяет хранилище ключей, когда адрес электронной почты правильный, проверка уходит.
3 - будет больше столбцов, таких как телефон, адрес будет регулярное выражение. Мне нужно проверять каждый столбец в каждой строке отдельно с помощью регулярного выражения.
Я попробовал свой лучше всего описать мою проблему что-нибудь еще, что я могу предоставить, скажи мне спасибо