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']
Да. Дело в том, что я не знаю, что поместить во внутренние поля атрибута «источник». С объектом его <TextField source = "url"/>
Возможно, вам потребуется создать альтернативный ArrayInput. Начните с копии и внесите изменения. Внимательно посмотрите на источник. github.com/marmelab/react-admin/blob/master/packages/… Также обратите внимание на то, что используется массив FieldArray redux.
хорошо, я посмотрю туда
@yBrodsky ты что-нибудь придумал? Вы не против поделиться? Я ищу то же самое, у меня есть простой плоский массив писем (строк), который я хочу красиво редактировать, добавлять или удалять. Ваше здоровье!
@VojtaHejda нет, я с треском провалился. Пытался создать свой собственный компонент (с блэкджеком и проститутками), используя redux-form, но не смог. У меня нет большого опыта во всем, что касается реакции. Итак, я закончил тем, что использовал marmelab.com/react-admin/Inputs.html#referencearrayinput. Работает нормально и делает то, что задумал, с бонусом, который показывает вам связанные данные модели.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я смог выполнить вариант ввода, в отличие от варианта полей, просто не предоставив атрибут источника для внутреннего TextField и выбрав источник массива в фактическом ArrayField. Тогда, конечно, просто используйте SimpleFormIterator. Очевидно, что React отдает предпочтение использованию ключей, по большей части рассматривая типы массивов как карты.
<ArrayInput source = "my-source">
<SimpleFormIterator>
<TextInput />
</SimpleFormIterator>
</ArrayInput>
Я пытался использовать это решение, но получаю сообщение об ошибке типа «Неудачный тип опоры: недопустимая опора value передана в TextField».
@Aswathy - ты решил это? Я получаю еще одну ошибку: Error: Cannot set a numeric property on an object, хотя мой массив содержит URL-адреса, такие как "picsum.photos/800"
@AswathyBalan @Hola Использовать пустую строку для исходного <TextInput source = "" />
Стоит отметить, что это не работает для ArrayField, но по какой-то причине работает для ArrayInput.
Возможно, вы сможете создать свой собственный компонент 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>
Вот мой рабочий код, основанный на сообщении @ fzaninotto в response-admin вопросы:
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>
Похоже, это также должно работать как <TextArrayField source = "tags" />, поскольку пользовательский компонент не использует переданные ему дочерние элементы.
Вы пробовали и получили ошибку?