web-dev-qa-db-ja.com

文字列/数値の配列を持つReact-admin配列入力

https://marmelab.com/react-admin/Inputs.html#arrayinput オブジェクトの配列がある場合の例を示します。

  backlinks: [
        {
            date: '2012-08-10T00:00:00.000Z',
            url: 'http://example.com/foo/bar.html',
        },
        {
            date: '2012-08-14T00:00:00.000Z',
            url: 'https://blog.johndoe.com/2012/08/12/foobar.html',
        }
   ]

文字列の配列だけで機能させることは可能ですか？

backlinks: ['a', 'b', 'c']
javascriptarraysreactjsreact-admin
13
yBrodsky

内側のTextFieldにソース属性を指定せず、実際のArrayFieldに配列を供給するだけで、フィールドバリアントとは対照的に、入力バリアントを実行できました。もちろん、SimpleFormIteratorを使用するだけです。明らかにReactは、キーの使用を支持し、ほとんどの場合、マップのような配列型を扱います。

<ArrayInput source="my-source">
  <SimpleFormIterator>
    <TextInput />
  </SimpleFormIterator>
</ArrayInput>
1
kcrawford

おそらく、ソースを取得して小道具として記録できる独自のFieldコンポーネントを作成できます。

 function populateList(numbers) {
        return numbers.map((number) =>
            <li key={number.toString()}>
                {number}
            </li>
        );
    }

    const SimpleArray = ({source, record = {}}) =>
        <ul>
            {
                populateList(record[source])
            }
        </ul>;


    SimpleArray.defaultProps = {
        addLabel: true,
        label: 'List'
     };


    SimpleArray.propTypes = {
        label: PropTypes.string,
        record: PropTypes.object,
        source: PropTypes.string
    };

    export default SimpleArray;

そして、次のようなフォーム要素内で簡単に使用できます。

  <SimpleShowLayout>
                        <TextField source="id"/>
                        <TextField label="Title" source="title" className={classes.name}/> 
                        <TextField source="title"/>
                        <NumberField source="defaultItemCount"/>
                        <RichTextField source="description"/>
                        <NumberField source="priceInNumber"/>
                        <SimpleArray source="attributeArray" label="Product Attributes" />




                    </SimpleShowLayout>
0
erhanasikoglu

これは、react-adminの@fzaninottoの投稿に基づいた私の作業コードですIssues：

import Chip from '@material-ui/core/Chip'

const TextArrayField = ({ record, source }) => {
  const array = record[source]
  if (typeof array === 'undefined' || array === null || array.length === 0) {
    return <div/>
  } else {
    return (
      <>
        {array.map(item => <Chip label={item} key={item}/>)}
      </>
    )    
  }
}
TextArrayField.defaultProps = { addLabel: true }

使用法：

  <TextArrayField source="tags">
    <SingleFieldList>
      <ChipField source="id" />
    </SingleFieldList>
  </TextArrayField>
0
Bagusflyer