4
Запиши в стили iconButton следующее:
iconButton: {
display: flex,
flex-direction: column,
align-items: center,
justify-content: center
}
Можно еще использовать для этого Material UI Grids, ссылка на документацию: https://material-ui-next.com/layout/grid/
4
Как правило, у элемента ввода по событию onChange(event) отлавливают введенное значение (event.target.value) и сохраняют в this.state. А уже при отправке формы пользуются значением из this.state. Но есть и другой вариант: полю ввода назначить атрибут ref, присвоив какое-нибудь значение, например myInput. Далее при отправке формы, используя доступ к полю ...
2
Если необходимо при загрузке компонента сделать запрос к серверу, то поместите эту функцию в componentDidMount()
axios.get('/your-path')
.then(response => {
this.setState({ data: response })
})
.catch(function (error) {
console.log(error);
});
P.S: у функции map есть второй аргумент - индекс (вместо вашего созданного i счетчика)
return ...
ответ дан 14 мая '18 в 8:17
Илья Паймушкин
1,71611 золотой знак88 серебряных знаков1414 бронзовых знаков
2
У react-router доступен объект router в контексте...
class TabMenu extends React.Component {
static contextTypes = {
router: React.PropTypes.object,
};
handleClick(...) { // тут нужно смотреть, что приходит после onChange tabs...
this.context.router.push({
pathname: '/users/12',
query: { tab: 'hello' },
});
}
render() {
...
2
Используйте ReduxForm, по мне, так очень удобно.
TextField:
import React from "react";
import fp from "lodash/fp";
import { bool, func, node, number, object, string } from "prop-types";
import { Field } from "redux-form";
import { TextField } from "material-ui";
TextFieldComponent.propTypes = {
meta: object,
input: object,
parseOnBlur: func
};
...
2
Вы можете прописать
document.getElementById('textmessage').scrollTop =
document.getElementById('textmessage').scrollHeight;
И добавить к document.getElementById('textmessage').scrollHeight высоту блока с сообщением, если у вас не проходит скролл до последнего сообщения.
Я так понимаю вы сначала отправляете сообщение, а затем прокручиваете ленту вниз. ...
2
Ну, если просто сверстать с помощью html css, то как-то так:
body {
background-color: #444652;
font-family: sans-serif;
font-size: 12px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
th, td {
border: 1px solid white;
padding: 10px;
text-align: center;
color: white;
}
td {
height: 30px;
}
th {
background-color: #545662;
...
ответ дан 9 дек '20 в 13:20
humster_spb
11.3k11 золотой знак1515 серебряных знаков3939 бронзовых знаков
2
Card title принимает только string в качестве аргумента, а вы ему передаёте функцию.
Для решения проблемы сохраните результат выполнения функции куда-нибудь и используйте его.
К примеру:
const [title, setTitle] = useState('')
const fn = async ()=> {
const newTitle = await params()
setTitle(newTitle)
}
useEffect(fn, [])
<Card
title = {...
1
Получить массив слов со звездочкой. Разделяем предложение по пробелу или запятой, потом фильтруем по наличию звёздочки в конце
let asteriskWords = this.state.textInput.split("/[\s,]/").filter((item) => {
return item.match("/.*\*$/") > -1;
});
ответ дан 26 апр '19 в 7:14
Dmitry Kozlov
5,86622 золотых знака1111 серебряных знаков2626 бронзовых знаков
1
Я решил сделать это таким способом:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import { NavLink } from "react-router-dom";
import Button from "@material-ui/core/Button";
const packageJSON = [
{
name: "Home",
path: "/"
},
{
name: "...
1
<Button variant="raised" color="primary" onClick={this.props.saveSelectedProject(selectedItems)} className={classes.button}>Скачать</Button>
const mapDispatchToProps = dispatch => ({
saveSelectedProject: (item) => {
console.log(`item ${item.label}`);
dispatch(actions.saveSelectedProject(item));
},
...
})
ответ дан 3 авг '18 в 13:12
Klimenko Kirill
2,09511 золотой знак88 серебряных знаков3232 бронзовых знака
1
чистый css же
a {
display: inline-block;
border: 2px solid #9ad29d;
border-radius: 5px;
padding: 10px 45px;
background: transparent; /*или #fff*/
color: #9ad29d;
text-transform: uppercase;
}
<a>кнопка кнопка</a>
https://jsfiddle.net/r3v4vkrd/1/
1
Можно рендерить менюшки в цикле, а не отдельно из константы их брать
class ProjectDetails extends Component {
constructor(props) {
super(props);
this.deleteNote = this.deleteNote.bind(this);
}
deleteNote(note) {
console.log(note)
}
render() {
const iconButtonElement = (
<IconButton
touch
tooltip="more"
...
1
<AutoComplete
fullWidth={true}
name='contractorName'
dataSourceConfig={{ text: 'name', value: 'id' }}
dataSource={::this.getContractorsList()}
onUpdateInput={::this.handleContractorName}
onNewRequest={::this.onContractorItemClick}
/>
Добавить свойтво onNewRequest={::this.onContractorItemClick}
onContractorItemClick(contractor) {
const { ...
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
material-ui × 45reactjs × 38
javascript × 18
css × 8
redux × 4
nextjs × 3
android × 2
html × 2
веб-программирование × 2
material-design × 2
react-router × 2
datepicker × 2
react-hook × 2
redux-form × 2
json × 1
алгоритм × 1
vue.js × 1
функции × 1
typescript × 1
webpack × 1
input × 1
datetime × 1
table × 1
компоненты × 1
datatable × 1