私は基本的にマテリアルテーブルインターフェイスを使用してクラッドを行うプロジェクトに取り組んでいます。必要に応じて必須フィールドを作成できる方法はありますか?
調べてみましたが、あまり成果はありませんでした。https://material-ui.com/components/tables/最後の例から単純な以下のコードを参照してください。もちろん、私は個人的な使用のためにコードベースを変更し、すべてが正常に機能しますが、必要に応じてフィールドを必須にする方法がわかりません。はいの場合、どうすればよいですか?MaterialTableの小道具オプションとして何かを渡しますか?
ご提案ありがとうございます。
import React from 'react';
import MaterialTable from 'material-table';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
],
data: [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.push(newData);
setState({ ...state, data });
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data[data.indexOf(oldData)] = newData;
setState({ ...state, data });
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.splice(data.indexOf(oldData), 1);
setState({ ...state, data });
}, 600);
}),
}}
/>
);
}
@HereticMonkeyのコメントは本質的に私の質問を解決します。
必須フィールドの作成は、異端の猿^^で示されている例のように、編集可能なコンポーネントを介して行われます。
ありがとうございました
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加