Реагировать - Таблица с входами, которые динамически обновляют родительское состояние.Логическая проблема - PullRequest
Новая
       54

Реагировать - Таблица с входами, которые динамически обновляют родительское состояние.Логическая проблема

0 голосов
/ 12 октября 2018

Я новичок в разработке и, к сожалению, все еще думаю, как разработчик AngularJS.Я хочу обновить данные о состоянии приложения, используя компоненты дочерней таблицы.Я разработал базовое решение, как показано ниже, но я не уверен, является ли мое решение эффективным или нет.Также будет замечательно, если вы предложите мне некоторые материалы для изучения основополагающей философии ReactJS.Спасибо за любые предложения. 

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            data:
                [
                    {
                        "id":1,
                        "name":"Foo",
                        "age":"20"
                    },
                    {
                        "id":2,
                        "name":"Bar",
                        "age":"30"
                    },
                    {
                        "id":3,
                        "name":"Baz",
                        "age":"40"
                    }
                ]
        }
        this.updateState = this.updateState.bind(this);
    }
    updateState(e){
        const cpy = this.state.data.slice();
        this.setState({data:cpy});
    }
  render() {
      return <div className="App">
          <div class="table-responsive">
              <table class="table table-hover">
                  <thead>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Updated Name</th>
                  </thead>
                  <tbody>
                  {
                      this.state.data.map((x,i) => <TableRow key={i} data={x} updateHandler={this.updateState}></TableRow>)
                  }
                  </tbody>
              </table>
          </div>
      </div>;
  }
}

class TableRow extends React.Component{
    constructor(){
        super();
        this.updateInput = this.updateInput.bind(this);
    }
    updateInput(e){
        this.props.data.name = e.target.value;
        this.props.updateHandler();
    }

    render(){
        return <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
            <td><input type="text" value={this.props.data.name} onChange={this.updateInput} /></td>
        </tr>
    }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);
<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>
<div id="container"></div>

1 Ответ

0 голосов
/ 12 октября 2018

Я бы посоветовал проверить документы с официального сайта actjs.org .

Что касается вашего кода, я думаю, что основная ошибка, которую вы делаете, заключается в том, что вы изменяете свои реквизиты в TableRow компонент updateInput метод: 

this.props.data.name = e.target.value;

Это не тот способ, которым вы должны обрабатывать изменение данных в React.Я бы предложил что-то вроде этого: 

import React, { Component } from "react";

class App extends Component {
  state = {
    data: [
      {
        id: 1,
        name: "Foo",
        age: "20"
      },
      {
        id: 2,
        name: "Bar",
        age: "30"
      },
      {
        id: 3,
        name: "Baz",
        age: "40"
      }
    ]
  };

  handleNameUpdate = (id, name) => {
    const { data } = this.state;
    const newData = data.map(row => {
      if (row.id === id) {
        return {
          ...row,
          name
        };
      }
      return row;
    });
    this.setState({ data: newData });
  }

  render() {
    return (
      <div className="App">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Updated Name</th>
              </tr>
            </thead>
            <tbody>
              {this.state.data.map(row => (
                <TableRow
                  key={row.id}
                  data={row}
                  onNameUpdate={this.handleNameUpdate}
                />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

class TableRow extends Component {
  handleChange = e => {
    this.props.onNameUpdate(this.props.data.id, e.target.value);
  };

  render() {
    const {
      data: { id, name, age }
    } = this.props;

    return (
      <tr>
        <td>{id}</td>
        <td>{name}</td>
        <td>{age}</td>
        <td>
          <input type="text" value={name} onChange={this.handleChange} />
        </td>
      </tr>
    );
  }
}

export default App;

Надеюсь, это немного поможет!Желаю тебе удачи!

...