Добавление атрибута selected в флажок в ReactJs

Question

Я использую <Checkbox> компонент в моем проекте реакции. Код:

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux';
import Checkbox from '../../../components/Checkbox/Checkbox.jsx';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div style={{ 'float': 'left', 'background': 'white' }}><Checkbox
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
          /></div>
      </div>
    )
  }
}



export default connect(

)(App); 

Checkbox.jsx

import React from 'react';

import './Checkbox.scss';

class Checkbox extends React.Component {
    render() {
        const { input: {name, size, value, onChange}, disabled } = this.props;

        return (
            <div className="checkbox">
                <input disabled={disabled} id={name} type="checkbox" value={value} onChange={onChange} />
                <label htmlFor={name} className={size}/>
            </div>
        );
    }
}

export default Checkbox;

Я хочу включить еще один атрибут checked: {Item.Selected} в тег <Checkbox>,для этого какие изменения мне нужно было сделать на странице Checkbox.jsx, чтобы принять значение атрибута selected?

Answer 1

Не уверен, правильно ли это понимаю, но если я правильно понимаю. App.jsx

class App extends Component {
  render() {
    return (
      <div className="App">
        <Checkbox
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
             checked={(your condition, evaluating to true/false)}
             disabled={whatever}                                
          />
      </div>
    )
  }
}

А потом Checkbox.jsx

class Checkbox extends React.Component {
    render() {
        const { input: {name, size, value, onChange}, disabled, checked } = this.props;
    return (
        <div className="checkbox">
            <input disabled={disabled} checked={checked} id={name} type="checkbox" value={value} onChange={onChange} />
            <label htmlFor={name} className={size}/>
        </div>
    );
}

Надеюсь, это поможет!

Answer 2

То, что вы называете атрибутом, называется опорой в реакции. Когда вы передаете реквизит компоненту, вы можете получить его с this.props в этом компоненте. Итак, ваши файлы должны быть такими:

App.jsx:

import React, { Component } from 'react'
import { connect } from 'react-redux';
import Checkbox from '../../../components/Checkbox/Checkbox.jsx';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div style={{ 'float': 'left', 'background': 'white' }}><Checkbox
             checked={Item.Selected}
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
          /></div>
      </div>
    )
  }
}



export default connect(

)(App); 

Checkbox.jsx:

import React from 'react';

import './Checkbox.scss';

class Checkbox extends React.Component {
    render() {
        //the checked variable added below:
        const { input: {name, size, value, onChange}, disabled, checked } = this.props;

        return (
            <div className="checkbox">
                <input disabled={disabled} id={name} type="checkbox" value={value} onChange={onChange} />
                <label htmlFor={name} className={size}/>
            </div>
        );
    }
}

export default Checkbox;