Помогите с Реакт формами

Question

Помогите сделать так, чтобы пры клике на чекбокс текстовый инпут рядом ставал "disabled" и его value = 0. В моем коде сейчас при клике на чекбокс, все доступные чекбоксы выделяются и никаких манипуляций с текстовым инпутом не происходит.

вот весь код компонента:

export default class PaymentsDetailsUsers extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked : false
        };

        this.checked = this.checked.bind(this);
    }

    checked(event) {
        this.setState({
              checked : !this.state.checked
          });

      console.log(this.state);
    }

    render() {
        return (
        this.props.users.map((item) => (
            <div className='payments_try' key={item.name} >
                <div className='w-100'>
                 
                    <input
                        className='checkbox'
                        type="checkbox"
                        name={item.name}
                        checked={this.state.checked}
                        onChange={this.checked}
                    />
                    {item.name}
                    <input
                        className='textarea'
                        type="number"
                        min='1'
                        value={this.state.value === true ? 0 : this.value}
                    />
                   
                </div>
            </div>
        ))
    )}
};

Answer 1

можно так

import React from 'react'
export default class PaymentsDetailsUsers extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
          checked : {},
          value:{}
      };
  }

  checked = (item)=>()=>{
      this.setState({
           checked : {...this.state.checked,[item.name]:!this.state.checked[item.name]}
        });
  }

  changeValue = (item)=>(event)=>{
    this.setState({
         value : {...this.state.value,[item.name]:event.target.value}
      });
  }

  render() {
      return (
      this.props.users.map((item) => (
          <div className='payments_try' key={item.name} >
              <div className='w-100'>
               
                  <input
                      className='checkbox'
                      type="checkbox"
                      name={item.name}
                      value={!!this.state.checked[item.name]}
                      onChange={this.checked(item)}
                  />
                  {item.name}
                  <input
                      className='textarea'
                      type="number"
                      min='1'
                      disable={this.state.checked[item.name]?'disable':''}
                      value={this.state.checked[item.name]?0:
                        this.state.value[item.name]?this.state.value[item.name]:1}
                      onChange={this.changeValue(item)}
                  />
                 
              </div>
          </div>
      ))
  )}
};

БЛОГ НА HUSL

Помогите с Реакт формами

Ответы (1 шт):