Ввод массива 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']

reactjs javascript arrays react-admin
person yBrodsky    schedule 22.07.2018    source источник
comment
Вы пробовали и получили ошибку?   -  person Tholle    schedule 23.07.2018
comment
Да. Дело в том, что я не знаю, что прописать во внутренних полях в исходном атрибуте. С объектом его <TextField source="url"/>   -  person yBrodsky    schedule 23.07.2018
comment
Возможно, вам потребуется создать альтернативный ArrayInput. Начните с копии и внесите изменения. Хорошенько посмотри на источник. github.com/ marmelab/react-admin/blob/master/packages/ Также обратите внимание на то, что используется FieldArray redux.   -  person Christiaan Westerbeek    schedule 23.07.2018
comment
ладно, посмотрю в ту сторону   -  person yBrodsky    schedule 23.07.2018
comment
@yBrodsky ты что-то придумал? Вы не против поделиться? Я ищу то же самое, у меня есть простой плоский массив электронных писем (строк), которые я хочу красиво редактировать, добавлять или удалять. Ваше здоровье!   -  person Vojta Hejda    schedule 25.07.2018
comment
@VojtaHejda нет, я с треском провалился. Пытался создать свой компонент (с блэкджеком и хукерами) с помощью редукс-формы, но не смог. У меня нет большого опыта со всей реакцией. В итоге я использовал marmelab.com/react-admin/Inputs.html#referencearrayinput Работает нормально и делает то, что я хотел, с бонусом, который показывает вам связанные данные модели   -  person yBrodsky    schedule 25.07.2018

Ответы (3)


arrow_upward
8
arrow_downward

Я смог выполнить вариант ввода, в отличие от варианта полей, просто не предоставляя исходный атрибут для внутреннего TextField и получая массив в фактическом ArrayField. Тогда, конечно, просто используйте SimpleFormIterator. Понятно, что React предпочитает использование ключей, по большей части рассматривая типы массивов как карты.

<ArrayInput source="my-source">
  <SimpleFormIterator>
    <TextInput />
  </SimpleFormIterator>
</ArrayInput>
person kcrawford    schedule 28.10.2018
comment
Я пытался использовать это решение, но получаю сообщение об ошибке типа «Неверный тип реквизита: неверный реквизит value предоставлен TextField». - person Aswathy Balan; 15.02.2019
comment
@Aswathy - ты решил это? Я получаю еще одну ошибку: Error: Cannot set a numeric property on an object хотя мой массив содержит такие URL-адреса, как picsum.photos/800 - person Hola; 06.06.2020
comment
@AswathyBalan @Hola Используйте пустую строку для источника <TextInput source="" /> - person Penguin; 18.01.2021
comment
Стоит отметить, что это не работает для ArrayField, но по какой-то причине работает для ArrayInput. - person polar; 30.05.2021

arrow_upward
3
arrow_downward

Вот мой рабочий код, основанный на сообщении @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>
person Bagusflyer    schedule 23.10.2019
comment
Похоже, это также должно работать как <TextArrayField source="tags" />, поскольку пользовательский компонент не использует переданные ему дочерние элементы. - person mjomble; 04.07.2021

arrow_upward
1
arrow_downward

Может быть, вы можете создать свой собственный компонент 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>
person erhanasikoglu    schedule 12.12.2018