Reactjs получает значения только последних выбранных записей - PullRequest
Новая
       1

Reactjs получает значения только последних выбранных записей

0 голосов
/ 14 декабря 2018

Reactjs получает идентификатор пользователя / значения только последних выбранных записей.

Здесь у меня есть 3 записи в массиве через реагировать. 

{ id: 1, name: "Tony", Age: "18" , gender: "male" },
{ id: 2, name: "John", Age: "21" , gender: "female"},
{ id: 3, name: "Luke", Age: "78" , gender: "male"},

всякий раз, когда я выбираютри записи из флажка и отправить, только одна запись выбирается и оповещается.

Эта выбранная запись всегда будет значением / идентификатором пользователя последнего установленного флажка.

Что я пытаюсь сделать, это убедиться, что код выбирает и отправлять все три записи, если отмечен соответствующий флажок.В приведенном ниже коде я также попробовал метод

arr.push () и arr.concat () , но не могу заставить его работать ...

Вот кодировка до сих пор 

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.useridChanged = this.useridChanged.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
      rec: [
        { id: 1, name: "Tony", Age: "18", gender: "male" },
        { id: 2, name: "John", Age: "21", gender: "female" },
        { id: 3, name: "Luke", Age: "78", gender: "male" },
      ],
      chrk: '',
    };
  }


  useridChanged(e) {
    this.setState({ chrk: e.target.value });
  }

  onSubmit(e) {
    //onSubmit = (e) => {
    e.preventDefault();
    const { chrk } = this.state;

    //let arr = [];
    //arr.concat(chrk);

    const arr = [];
    arr.push(chrk);
    alert(arr);
    console.log(arr);


    const data = { check: arr };
    console.log(data);

    /*
    send to database by axios
    axios.post('http://localhost/apidb_react/checkbox.php', data)
              .then(res => console.log(res.data));
    */
  }

  render() {
    return (
      <div>
        <div>
          <h3>Get values of all Selected Records</h3>
          <form onSubmit={this.onSubmit}>
            <ul>
            {this.state.rec.map((obj, i)=>(
              <li key={i}>
                <input
                  type="checkbox"
                  name="chrk"
                  value={obj.id}
                  onChange = {this.useridChanged}
                />
                {obj.name} - {obj.Age}  - {obj.gender} 
              </li>))}
            </ul>
            <button className="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Application />,document.getElementById('app'));

Ответы [ 3 ]

0 голосов
/ 14 декабря 2018

вот ваш обновленный код, который будет работать так, как вы хотите - 

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>    
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<div id="app"></div>

<script type="text/babel">

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

this.useridChanged = this.useridChanged.bind(this);
this.onSubmit= this.onSubmit.bind(this);


    this.state = {
       rec: [
        { id: 1, name: "Tony", Age: "18" , gender: "male" },
        { id: 2, name: "John", Age: "21" , gender: "female"},
        { id: 3, name: "Luke", Age: "78" , gender: "male"},
      ],
checkedIds: []

    };

  }


  useridChanged(e) {
    let checkedIds = this.state.checkedIds;
    if(e.target.checked){
      checkedIds.push(e.target.value);
    } else{
      checkedIds = checkedIds.filter((id) => id!== e.target.value )
    }
      this.setState({
        checkedIds
      });
 }

onSubmit(e) {
    e.preventDefault();
 var selectedIds = this.state.checkedIds;
console.log(selectedIds);


const data = { check: selectedIds };
console.log(data);

/*
send to database by axios
axios.post('http://localhost/apidb_react/checkbox.php', data)
          .then(res => console.log(res.data));
*/
  }

  render() {
    return (
      <div >
        <div>
          <h3>Get values of all Selected Records</h3>



<form onSubmit = {this.onSubmit}>



          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>

                 <input type="checkbox" name="chrk" value={obj.id}

                onChange={this.useridChanged}
              />{obj.name} - {obj.Age}  - {obj.gender} 


              </li>
            ))}
          </ul>


 <button className="btn btn-primary">
              Submit
            </button>

        </form>


        </div>

      </div>
    );
  }
}
ReactDOM.render(<Application />, document.getElementById('app'));


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>
0 голосов
/ 14 декабря 2018

Я не уверен, хотите ли вы отправлять как data только идентификаторы отмеченных элементов или целых элементов.

Если вы хотите отправить только идентификаторы 

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    rec: [
      { id: 1, name: "Tony", Age: "18", gender: "male" },
      { id: 2, name: "John", Age: "21", gender: "female" },
      { id: 3, name: "Luke", Age: "78", gender: "male" }
    ],
    chrk: []
  };

  useridChanged = e =>
    this.setState({ chrk: this.state.chrk.concat(e.target.value) });

  onSubmit = e => {
    e.preventDefault();
    const { chrk } = this.state;
    // chrk is your data
     /*
    send to database by axios
    axios.post('http://localhost/apidb_react/checkbox.php', data)
              .then(res => console.log(res.data));
    */
  };

  render() {
    return (
      <div>
        <div>
          <h3>Get values of all Selected Records</h3>
          <form onSubmit={this.onSubmit}>
            <ul>
              {this.state.rec.map((obj, i) => (
                <li key={i}>
                  <input
                    type="checkbox"
                    name="chrk"
                    value={obj.id}
                    onChange={this.useridChanged}
                  />
                  {obj.name} - {obj.Age} - {obj.gender}
                </li>
              ))}
            </ul>
            <button className="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Если вы хотите отправить целые элементы 

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    rec: [
      { id: 1, name: "Tony", Age: "18", gender: "male" },
      { id: 2, name: "John", Age: "21", gender: "female" },
      { id: 3, name: "Luke", Age: "78", gender: "male" }
    ],
    chrk: []
  };

  useridChanged = e =>
    this.setState({ chrk: this.state.chrk.concat(e.target.value) });

  onSubmit = e => {
    e.preventDefault();
    const { chrk, rec } = this.state;
    let data = [];
    rec.map(item =>
      chrk.map(check => {
        if (check === item.id.toString()) data.push(item);
      })
    );
    
     /*
    send to database by axios
    axios.post('http://localhost/apidb_react/checkbox.php', data)
              .then(res => console.log(res.data));
    */
  };

  render() {
    return (
      <div>
        <div>
          <h3>Get values of all Selected Records</h3>
          <form onSubmit={this.onSubmit}>
            <ul>
              {this.state.rec.map((obj, i) => (
                <li key={i}>
                  <input
                    type="checkbox"
                    name="chrk"
                    value={obj.id}
                    onChange={this.useridChanged}
                  />
                  {obj.name} - {obj.Age} - {obj.gender}
                </li>
              ))}
            </ul>
            <button className="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
0 голосов
/ 14 декабря 2018

Если я правильно понял, вы хотите отправить данные следующим образом: 

[
    { id: 1, name: "Tony", Age: "18" , gender: "male", checked: true },
    { id: 2, name: "John", Age: "21" , gender: "female", checked: false},
    { id: 3, name: "Luke", Age: "78" , gender: "male", checked: false},
  ],

Если это так, вам нужно немного изменить свой код, как показано ниже: 

 class App extends Component {
  constructor() {
    super();
   this.state = {
       rec: [
        { id: 1, name: "Tony", Age: "18" , gender: "male" },
        { id: 2, name: "John", Age: "21" , gender: "female"},
        { id: 3, name: "Luke", Age: "78" , gender: "male"},
      ],
      chrk: '',

    };
  }

  useridChanged(name, e) {
     let rec = this.state.rec.map(a => ({...a}));
     rec.map(i => i.checked = i.name === name ? e.target.checked : i.checked ? i.checked : false);
     this.setState({ rec }, () => console.log(this.state.rec));
  }

  render() {
    return (
      <div>
        <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>

                 <input type="checkbox" name="chrk" value={obj.id}

                onChange={this.useridChanged.bind(this, obj.name)}
              />{obj.name} - {obj.Age}  - {obj.gender} 


              </li>
            ))}
          </ul>
      </div>
    );
  }
}

демоверсия Во время отправки вы можете получить этот флажок напрямую и перейти к servevr

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...