Как мне программно установить свойство флажка 'флажок' или 'defaultChecked' в реакции - PullRequest
Новая
       10

Как мне программно установить свойство флажка 'флажок' или 'defaultChecked' в реакции

0 голосов
/ 30 апреля 2018

Я занимаюсь разработкой веб-приложения с реагированием.

Я хочу динамически установить свойство 'флажок' на флажок.

Он показал нужный мне экран, но он не работал, когда я программно установил свойство «флажок».

Итак, я искал об этом.

некоторые люди рекомендовали использовать свойство defaultChecked.

муравей, тогда я попробовал это. но не удалось.

Он не изменился, когда я дал событие, которое программно установило свойство selected. Всегда показывало значение defaultChecked.

исходный код 

render() {
list = {
 resource: {[...], [...] },
 ...
}
return (
<ParameterContainer values={ list } />
);
}

    class ParameterContainer extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        const { values } = this.props;
        return (
            <div className="parameter-table">
                <div className="parameter-row-container">
                    <ul className="parameter-row title">
                        <li className="parameter parameter-1">valid</li>
                        <li className="parameter parameter-2">Key</li>
                        <li className="parameter parameter-3">Type</li>
                        <li className="parameter parameter-4">oid</li>
                        <li className="parameter parameter-5">rid</li>
                        <li className="parameter parameter-6">desc</li>
                    </ul>
                    {
                        values.resource.map((value, i) => {//one row
                            return (
                                <ParameterItem value={ value } index={ i } key={ i }/>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}

class ParameterItem extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        const { value, index } = this.props;
        const items = [];

        for (let o in value) {
            if (o === "valid") {
                continue;
            }
            items.push(value[o]);
        }
        return (
            <ul className={`parameter-row parameter-row-${ index+1 }`}>
                <li className="parameter parameter-1">
                    <input type="checkbox" defaultValue={ value.valid } checked={ value.valid } onChange={ this.toggle }/> //i tried to this.
                    <Checkbox isChecked={ value.valid } /> // and then tried this...
                </li>
            </ul>
        );
    }

    toggle(e) {
        $(e.target).prop("checked", e.target.checked ? 0 : 1);
    }
}

class Checkbox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: !!this.props.isChecked
        };
    }

    handleChange = (e) => {
        const { target: { checked }} = e;
        this.setState({ checked });
    }

    render() {
        return (
            <input type="checkbox" checked={ this.state.checked } onChange={ this.handleChange } />
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Вы ищете контролируемые компоненты, где значение компонента определяется состоянием и обновляется через обработчик onchange. Проверить https://reactjs.org/docs/forms.html#controlled-components

0 голосов
/ 30 апреля 2018

В методе onChange при вводе флажка отсутствует подшивка.

Попробуйте это: onChange={this.handleChange.bind(this)}.

Более подробное объяснение использования .bind(this) можно найти здесь: Обработка событий

...