render() {
const {books, url} = this.props;
return (
<ul>
{books.filter(book => book.name === url).map((book, key) => (
<li key={key}>
<p>{book.name}</p>
<p><Link to={`/${book.author}`}>{book.author}</Link></p>
<p>{book.descrip}</p>
</li>
))}
</ul>
);
}а как же тогда сделать, так, чтоб если пользователь вводит в строку значение, которое не соответсвует регулярному выражению - выполнялась функция event.preventDefault() ? ведь keyDown и keyPress для этого не подходят, так как они берут старые занчения
<input type="text" value={someValue} onChange={handleChangeSomeValue}/>handleChangeSomeValue(e) {
const nextVal = e.currentTarget.value;
if (!isValid(nextVal)) {
return;
}
this.setState({ someValue: nextVal });
}import styles from 'styles.less';
...
componentDidMount() {
styles.use();
}
componentWillUnmount() {
styles.unuse();
}class MyClass {
foo = () => {
console.log('foo a = ', this.a);
}
bar = () => {
this.a = 10;
setTimeout(this.foo, 10); // Мы не биндим foo на this
}
}
const o = new MyClass();
const bar = o.bar; // и тут тоже не биндим
bar(); // выводит "foo a = 10"function getElementByPath(array &$arr, array $path) {
$el = $arr[array_shift($path)];
if (count($path) === 0) {
return $el;
}
return getElementByPath($el, $path);
}$arr = array(
'one' => array(
'two' => array(
'three' => 'stroka'
)
)
);
$path = array(
'one',
'two',
'three'
);
$el = getElementByPath($arr, $path);
var_dump($el); // ---> 'stroka'// Последний параметр значение, если элемент не найден
function getElementByPath(array &$arr, array $path, $initial = null) {
return array_reduce($path, function (&$res, $key) use (&$initial) {
return is_array($res) && isset($res[$key]) ? $res[$key] : $initial;
}, $arr);
}
var buf = new Array();
// заполним 200МБ памяти
for(var i = 0; i != 200; ++i) {
buf[i] = nop + shellcode;
}this.setState({ massiv: [ ...this.state.massiv, "новый элемент" ] })const someArr = [];
const doAjaxJob = el => fetch('some-url', .... );
const p = Promise.all(someArr.map(doAjaxJob)); // <-- сюда можно подписатьсяclass MyForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.addGood = this.addGood.bind(this);
this.changeGoodCount = this.changeGoodCount.bind(this);
this.state = { goods: [] };
}
handleSubmit() {
console.log('handleSubmit');
}
addGood() {
const { goods } = this.state;
this.setState({ goods: [ ...goods, { count: 0 } ] });
}
changeGoodCount(n, count) {
const { goods } = this.state;
this.setState({ goods: goods.map( (good, i) => i === n ? { count } : good ) });
}
render() {
const { goods } = this.state;
const { handleSubmit, addGood, changeGoodCount } = this;
console.log('MyForm.render() -> goods =', goods);
return (
<form onSubmit={handleSubmit}>
<div>
Имя пользователя: <input type="text" />
</div>
<div>
Телефон: <input type="text" />
</div>
<div>
{ goods.map( (good, i) => <GoodInput key={i} good={good} n={i} onChange={changeGoodCount}/> ) }
</div>
<div>
<button type="button" onClick={addGood}>Добавить что-либо</button>
</div>
</form>
);
}
}
class GoodInput extends React.Component {
handleChange(e) {
const { n, onChange } = this.props;
const count = e.currentTarget.value;
onChange(n, count);
}
render() {
const { good, n } = this.props;
return (
<div>
Количество товара {n} <input type="text" onChange={(e) => this.handleChange(e)} />
</div>
);
}
}let unlisten = history.listen(location => {
console.log(location.state); // <-- переданный в Link state.
})<Link to="some" hash="#idOfElement" >Scroll to</Link>
let unlisten = history.listen(location => {
console.log(location.hash); // <-- переданный в Link hash.
})<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() { ... }
</script>function drawVisualization(element, commonData, regionData) {
console.log('elemet', element);
var data = google.visualization.arrayToDataTable(commonData);
var mapVisualization = new google.visualization.GeoChart(element);
mapVisualization.draw(data, regionData);
}<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart']});
</script>class MapVisualization {
componentDidMount() {
this.drawMap();
}
componentDidUpdate() {
this.drawMap();
}
drawMap() {
drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
}
render() {
return (
<div ref="mapDiv" />
);
}
};render() {
var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
}.bind(this));
const { commonData, data } = this.props;
const { current } = this.state;
return (
< div className = 'container' >
<div className='col-12'>
{list}
<div className = 'map'>
<MapVisualization data={data[current].content} commonData={commonData} />
</div>
</div>
</div>
);
}