.menu {
position: relative;
&__item {
display: block;
margin-bottom: 5px;
position: relative;
}
&__link {
display: block;
font-size: 1rem;
color: blue;
}
&__img {
position: absolute;
width: 10px;
height: 10px;
display: none;
}
//==
//== Hover & active states
//== ======================================= ==//
&__link:hover,
&__link_active {
color: red;
}
&__link:hover + &__img,
&__link_active + &__img {
display block;
}
}
inputChange = e => {
const index = +e.target.dataset.index;
this.setState({
workers: this.state.workers.map((n, i) => i === index
? { ...n, checked: e.target.checked }
: n
),
});
}
<input
type="checkbox"
data-index={index}
onChange={this.inputChange}
checked={item.checked}
/>
const sum = this.state.workers.reduce((acc, n) => acc + (n.checked ? n.salary : 0), 0);
Component A
state = {
fromSuperComponent: '123',
}
callMeHandle = (e) => {
this.setState({
fromSuperComponent: e.currentTarget.value,
})
}
render() {
return (
<form>
<input type='text' value='test'/>
<SuperComponent callMeWhenDataChanged={this.callMeHandle} value={this.state.fromSuperComponent} />
</form>
)
}
SuperComponent
render() {
<input type='text' value={this.props.value} onChange={this.props.callMeWhenDataChanged} />
}
FlatList
до сих пор, ждут давно.class SomeComponent extends Component {
static propTypes = {
someFunction: PropTypes.func
}
state = {
inputValue: transferTemplateType.none,
}
handleChangeTextInput = (event) => {
this.setState({ [event.target.name]: event.target.value });
}
sendValue = () => {
this.props.someFunction(this.state.inputValue);
}
render() {
return (
<div>
<input onChange={this.handleChangeTextInput} value={this.state.inputValue} />
<button onclick={this.sendValue}>Передать значение</button>
</div >
);
}
}
const mapDispatchToProps = (dispatch) => ({
someFunction: (inputValue) => dispatch(someFunction(inputValue))
});
export default connect(null, mapDispatchToProps)(SomeComponent);