Как сделать динамический флажок и опубликовать данные с помощью извлечения сообщения? - PullRequest
Новая
       26

Как сделать динамический флажок и опубликовать данные с помощью извлечения сообщения?

0 голосов
/ 21 января 2019

У меня есть постоянный файл с этими данными: 

export let testing= [
  { id: 'test1', label: 'Test1' },
  { id: 'test2', label: 'Test2' },
  { id: 'test3', label: 'Test3' }
]

В моем checkboxes.js, 

class CheckBoxes extends Component {
  constructor(props) {
    super(props);
    this.state = ({
      checkBoxArray: [],
      isChecked: false 
    })
  }

  handleSubmit = (event) => {
    event.preventDefault();     //use for testing only
   fetch(`${process.env.REACT_APP_SERVER_URL}/testing`, {
      method: "POST",
     headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        check_box_data: event.target.check_box_name[].value,   //error
      })
    })
      .then(response => {
        console.log(response);
        if (response.status === 200) {
          console.log('Success')
        } else {
          alert('Failed')
        }
      })
      .catch(error => {
        alert('Server error')
      });
  }

  handleCheckBoxChange = (index) => {     //not working
    const {checkBoxArray} = this.state;

    checkBoxArray[index].checked = !checkBoxArray[index].checked;
    this.setState({           //this line causes maximum depth mount error
      checkBoxArray
  });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
           <div>
                {
                  this.state.checkBoxArray.map((object, index) => {
                    return (
                      <CheckBoxComponent
                        key={index}
                        check_box_id={object.id}
                        check_box_name='check_box_name[]'
                        check_box_label={object.label}
                        check_box_value={object.id}
                        isChecked={this.state.isChecked}
                        handleCheckBoxChange={this.handleCheckBoxChange(index)}
                      />
                    );
                  })
                }

            <SingleButtonComponent button_type='submit' button_value='Create Now' />
          </div>
        </form>
      </div>

    )
  }
}

export default CheckBoxes;

В моем чекбоксе компонент js: 

import React from 'react';

const CheckBoxComponent = (props) => {
  const { check_box_id, check_box_name, check_box_label, check_box_value, isChecked, handleCheckBoxChange } = props;
  return (
    <div>
      <input type='checkbox' id={check_box_id} name={check_box_name} value={check_box_value} checked={isChecked} onChange={handleCheckBoxChange}/>
      <label htmlFor={check_box_id} className='lh-copy'>&nbsp;{check_box_label}</label>
    </div>
  )
}
export default CheckBoxComponent;

Моя первая проблема - я не могу опубликовать значение флажка в виде массива в API выборки. Видимо [] не разрешено в event.target.check_box_name[].value. Я попытался сделать event.target.check_box_name.value, но он не может прочитать свойство 'значение' из неопределенного. Я хочу отправить массив значений флажков обратно на сервер.

Моя вторая проблема - я не знаю, как установить динамически генерируемый флажок. Этот фрагмент кода проверит все флажки. Я показываю только 3 строки данных в постоянном файле, и это больше, поэтому я не приму никакого решения, которое работает статически.

Пожалуйста, дайте мне знать, если вы хотите, чтобы я добавил больше деталей или что-то еще Спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Флажок Сhecked Param зависит от того, какие реквизиты проверены, которые вы записали как this.state.isChecked и никогда не меняете.

Почему ??

То же для каждого флажка ???

Изменить проверенные условия на 

<CheckBoxComponent
   key={index}
   // ... some props
   isChecked={object.checked} // you update this field in handleCheckBoxChange
/>
0 голосов
/ 21 января 2019

Не вызывайте функцию напрямую в render handleCheckBoxChange (), используйте => или связывайте для этого: 

class CheckBoxes extends Component {
    constructor(props) {
      super(props);
      this.state = ({
        checkBoxArray: [  { id: 'test1', label: 'Test1' },
        { id: 'test2', label: 'Test2' },
        { id: 'test3', label: 'Test3' }],
        isChecked: false 
      })
    }

    handleSubmit = (event) => {
      event.preventDefault();     //use for testing only
     fetch(`${process.env.REACT_APP_SERVER_URL}/testing`, {
        method: "POST",
       headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          check_box_data: event.target.check_box_name.value,   //error
        })
      })
    }

    handleCheckBoxChange = (id) => {
      const checkBoxArray = [...this.state.checkBoxArray];
      const index = checkBoxArray.findIndex(object => object.id === id);
      checkBoxArray[index].isChecked = !checkBoxArray[index].isChecked;
      this.setState({
        checkBoxArray
      });
    }

    render() {
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
             <div>
                  {
                    this.state.checkBoxArray.map((object, index) => {
                      return (
                        <CheckBoxComponent
                          key={object.id}
                          check_box_id={object.id}
                          check_box_name='check_box_name'
                          check_box_label={object.label}
                          check_box_value={object.id}
                          isChecked={object.isChecked}
                          handleCheckBoxChange={this.handleCheckBoxChange} //you can pass id here but affect performance
                        />
                      );
                    })
                  }

            </div>
          </form>
        </div>

      )
    }
  }



const CheckBoxComponent = (props) => {
  const { check_box_id, check_box_name, check_box_label, check_box_value, isChecked, handleCheckBoxChange } = props;
  return (
    <div>
      <input type='checkbox' id={check_box_id} name={check_box_name} value={check_box_value} checked={isChecked} onChange={() => {handleCheckBoxChange(check_box_id)}}/>
      <label htmlFor={check_box_id} className='lh-copy'>&nbsp;{check_box_label}</label>
    </div>
  )
}

CheckBoxComponent.defaultProps = {
  isChecked: false,
}

export default CheckBoxComponent;
...