如何访问/引用组件内部的组件值

Question

Trying to build a react component where I need to control checked status of checboxes and select options when change event occurs. But I don't know how it is possible to get value of the checked checkbox(es) and set the state.

We're using custom data-binding. On page load, we're assigning selected value of the select, with jQuery.

1. Programmatically changing value of the select must update matching check-boxes.

2. When user checks/unchecks a checkbox, corresponding value must be toggled on the select.

With jQuery I would loop trough check-boxes and build array with checked values then assign this value to the select on checkbox change. And when select change event is triggered, I would uncheck all check-boxes and check the ones matching selected items.

This is my simplified code.

state = {
    items: [
            {Key: 1, Value: "A"},
            {Key: 29, Value: "Z"}
        ],
    selected: [1, 29]
}

function onSelectChange(){
    // Update checked checkboxes
}

function onCheckboxChange(){
    // Update selected options
}

<div>
    <select multiple onChange={onSelectChange} className="hidden">
        {this.state.items.map((item, i) =>
            <option value={item.Key}>{item.Value}</option>
        )}
    </select>

    <div className="checkboxes">
        {this.state.items.map((item, i) =>
            <input
                type="checkbox"
                key={i}
                checked={this.state.selected.indexOf(item.Key) >= 0}
                onChange={onCheckboxChange} />
        )}
    </div>
</div>

Answer 1

You would use this.setState({}) inside the event handler to update the state of a component in React. This triggers a rerender in React which allows you to query the the updated state ( this.state.selected ).

Be advised that this.setState() expects an immutable object, so you should never change the previous, but always set a new state object!

Answer to comment:

For selectItem:

onSelectChange = event => this.setState({selected:event.target.value})

and for checkboxes (note the prevState):

onCheckboxChange = item => event => this.setState(({selected,...prevState})=> ({
   ...prevState,
   selected: event.target.checked? selected.concat(item): selected.filter(it=> it!== item)
}))

and usage:

    {this.state.items.map((item, i) =>
        <input
            type="checkbox"
            key={i}
            checked={this.state.selected.indexOf(item.Key) >= 0}
            onChange={onCheckboxChange(item)} />
    )}

This has the downside that it will create a new function on each rerender, so it's better to create a custom CheckboxItem and pass the item to it and use a handleClick .

Answer 2

onChange function give event where you could check whether the select box is being checked or not using this you can update your state accordingly.

function onCheckboxChange(e){
  console.log("checked", e.target.checked);
  // Then, on the basis of boolean you can update your state
}