Взять входное значение из входного и добавить в состояние

Question

Я только начал изучать reactjs, и я не могу сделать что-то простое, например, взять значение из входных данных и добавить к существующей переменной, как при использовании basi c javascript DOM. Я пытался использовать DOM, но я думаю, что он действительно не работает на reactjs.

Я хочу сделать кнопку, которая заменяет значение свойства 'name' индивидуально внутри состояния с input [type = 'text' ] значение, которое в этом случае имеет 3 входа для каждого свойства.

как мне это сделать?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = { 
    data :[
      {Name: 'rommy',
       Ages: 24,
       Occupation: 'coder'
    },
      {Name: 'andi',
       Ages: 43,
       Occupation: 'Teacher'
    },
      {Name: 'susilo',
       Ages: 42,
       Occupation: 'Mobile Dev'
    }
    ]
  }

  renderBiodata = () => {
    let {data} = this.state;
    return data.map((val) =>{
      return(
      <div style={{border: '1px solid black'}}>
      <div>
        {val.Name}
      </div>
      <div>
        {val.Ages}
      </div>
      <div>
        {val.Occupation}
      </div>
      <div>
        <input type="text"/>
      </div>
      <div>
        <input type="button" value="Change Name" onClick="changeName"/>
      </div>
      <div></div>
      <div></div>
      </div>
    )
  })
}

  render() {
    return (
      <div style={{display:'flex', justifyContent: 'center'}}>
        {this.renderBiodata()}
      </div>
    )
  }
} 

export default App;

Answer 1

Здесь вы используете концепцию Array of Object. Изменение значений в массиве объектов немного сложнее. Если вы это хорошо понимаете, то это хорошо, иначе я предлагаю вам прочитать об этом. :)

Предложение - Как управлять состоянием реагирования с массивами

Код ниже - решение вашей проблемы.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    data: [
      { Name: "rommy", Ages: 24, Occupation: "coder", inputVal: "" },
      { Name: "andi", Ages: 43, Occupation: "Teacher", inputVal: "" },
      { Name: "susilo", Ages: 42, Occupation: "Mobile Dev", inputVal: "" }
    ]
  };

  renderBiodata = () => {
    let { data } = this.state;
    return data.map((val, i) => {
      return (
        <div style={{ border: "1px solid black" }}>
          <div>{val.Name}</div>
          <div>{val.Ages}</div>
          <div>{val.Occupation}</div>
          <div>
            <input
              type="text"
              value={val.inputVal}
              onChange={e => {
                let _val = Object.assign({}, val);
                _val.inputVal = e.target.value;
                this.setState((state, prop) => ({
                  data: state.data.map((x, j) => {
                    if (i === j) return _val;
                    return x;
                  })
                }));
              }}
            />
          </div>
          <div>
            <input
              type="button"
              value="Change Name"
              onClick={() => {
                let _val = Object.assign({}, val);
                _val.Name = val.inputVal;
                this.setState((state, prop) => ({
                  data: state.data.map((x, j) => {
                    if (i === j) return _val;
                    return x;
                  })
                }));
              }}
            />
          </div>
          <div />
          <div />
        </div>
      );
    });
  };

  render() {
    return (
      <div style={{ display: "flex", justifyContent: "center" }}>
        {this.renderBiodata()}
      </div>
    );
  }
}

export default App;

Answer 2

Я создал пример того, как обновлять состояние из ввода.

https://codesandbox.io/s/gallant-cohen-lv8p0?fontsize=14&hidenavigation=1&theme=dark

Я предпочитаю способ с функциональным компонентом, но также создал компонент класса с таким же поведением.

Дайте мне знать, если вам нужно больше ясности.