Привет, я новичок в реагировании и загрузке кода ... это довольно классная штука ... но я думаю, что загрузочный CSS немного запутывает ...
Я пытаюсь отобразить только 4 изображения подряд для числа n символов
Это компонент, который я хотел бы использовать повторно для добавления изображений на любую страницу.
Я могу успешно добавить изображения, нажав кнопку «Выбрать файл», но они располагаются вертикально.
Я пробовал несколько разных стилей форматирования "col-md-x", но я просто не могу понять, как обернуть изображения.
Кроме того, я хотел бы придерживаться стилей форматирования "столбца" / "строки" начальной загрузки "col-md-1", "col-md-2" (и т. Д.)
У меня есть эти файлы, связанные с компонентом:
FileDropZone.css
/*
this simply hides the "no file chosen" and file name of the input button
*/
input[type='file'] {
color: transparent;
}
FileDropZone:
import './FileDropZone.css';
import React, { Component } from 'react';
import FileDropZoneFeed from './FileDropZoneFeed';
class FileDropZone extends Component {
constructor(props) {
super(props);
this.state = {
files: null,
}
this.handleInputChange = this.handleInputChange.bind(this)
}
handleAddFile = (field, file) => {
//console.log("handleAddFile");
let temp = this.state[field] || [];
temp.push(file);
this.setState({[field]: temp});
}
handleInputChange(event){
const input = event.target.files[0]
if (!input) {
// user has hit the cancel button
return;
}
let r = new FileReader();
r.readAsDataURL(input);
r.onload = (e) =>{
this.handleAddFile("files", e.target.result);
}
}
render() {
let inputSelector = (
// simple choose file button
<div>
<input type="file" onChange={this.handleInputChange}/>
</div>
);
let content = null;
if(this.state.files !== null){
content = (
<FileDropZoneFeed files={this.state.files} />
); }
return (
<div className="container">
{inputSelector}
{content}
</div>
);}
}
export default FileDropZone;
FileDropZoneFeed:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FileDropZoneItem from './FileDropZoneItem';
class FileDropZoneFeed extends Component {
render() {
const { files } = this.props;
return files.map((file, index) => (
<FileDropZoneItem key={index} id={index} file={file} />
));
}
}
FileDropZoneFeed.propTypes = {
files: PropTypes.array.isRequired,
};
export default FileDropZoneFeed;
FileDropZoneItem.js
import './FileDropZone.css';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
class FileDropZoneItem extends Component {
render() {
const { id, file } = this.props;
return (
<div>
<div className="col-md-3">
<img src={file} width="200" height="200"/>
</div>
</div>
); }
}
FileDropZoneItem.propTypes = {
id: PropTypes.number.isRequired,
file: PropTypes.string.isRequired
};
const mapStateToProps = state => ({ });
export default connect(mapStateToProps)(FileDropZoneItem);
Я ожидаю, что 4 изображения (или меньше) будут размещены в строке, и если будет более 4 изображений, следующие 4 будут перенесены в следующую строку (и т. Д.)
То, что происходит сейчас, - все изображения располагаются вертикально.
Обновление 1: 18 января 2019
Согласно предложению Патрика, удалите этот "" из рендера FileDropZoneItem, так что он просто делает это:
return (
<div>
<img src={file} width="200" height="200"/>
</div>
); }
}
Вот что я сейчас получаю:
Обновление 2: 18 января 2019 года
пробует предложить использовать flex-container и flex-item, и это то, что я вижу, когда проверяю свое приложение. Я добавил два «изображения» (я вынул объект img и заменил его квадратом), но, как вы можете видеть, квадраты все еще складываются, но похоже, что flex-элемент движется по всей странице?
Обновление 3: 18 января 2019 г.
Я воспользовался предложением Стивера о переходе на CSS-трюки и просто скопировал код из одной из их демонстраций flex grid, и та-да ... это сработало. Мне нужно было только изменить элементы div на ul и ui
<ul className="flex-container wrap">
{content}
</ul>
<ul className="flex-item ">
<img src={file} width="200" height="200"/>
</ul>
вот результат, выглядит неплохо:
