Создать из введенных данных в input-ы объект?

Question

[aznhautroalvyl]

Есть три input-а. При нажатии на кнопку значения input-ов сохраняются в объект вида:
{surname: 'Фамилия', name: 'Имя', city: 'Город'}.
Сам объект хранится в главном компоненте в this.state. После этого объект передаётся в функцию addToDatabase.
Подскажите, как правильно реализовать это?

У меня была следующая попытка:
mainPage.jsx

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {         
      newPerson: {
        name: '',
        surname: '',
        city: ''
      }
    };
    this.getInputNameValue = this.getInputNameValue.bind(this);
    this.getInputSurnameValue = this.getInputSurnameValue.bind(this);
    this.getInputCityValue = this.getInputCityValue.bind(this);
    this.addToDatabase = this.addToDatabase.bind(this);
  }

  getInputNameValue(inputValue) {
    this.setState({ newPerson.name: inputValue });   // здесь ошибка в использовании newPerson.name
  }

  getInputSurnameValue(inputValue) {
    this.setState({ newPerson.surname: inputValue });   
  }

  getInputCityValue(inputValue) {
    this.setState({ newPerson.city: inputValue });   
  }

  addToDatabase() {
    fetch(`http://127.0.0.1:3000/add/${this.state.newPerson}`, {
      method: 'PUT'
    })
      <...>
  }

  render() {
    return (
      <div>      
        <InputForm getInputNameValue={this.getInputNameValue}
           getInputSurnameValue={this.getInputSurnameValue} getInputCityValue={this.getInputCityValue}               
        />          
        <Footer addToDatabase={this.addToDatabase}/>
      </div>
    );
  }
}

InputForm.jsx

const propTypes = {
  getInputNameValue: PropTypes.func,
  getInputSurnameValue: PropTypes.func,
  getInputCityValue: PropTypes.func  
};

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nameP: '',
      surnameP: '',
      cityP: '',
      value: ''
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleSurnameChange = this.handleSurnameChange.bind(this);
    this.handleCityChange = this.handleCityChange.bind(this);    
  }

  handleNameChange(event) {
    this.setState({ nameP: event.target.value });
    this.props.getInputNameValue(event.target.value);
  }

  handleSurnameChange(event) {
    this.setState({ surnameP: event.target.value });
    this.props.getInputSurnameValue(event.target.value);
  }

  handleCityChange(event) {
    this.setState({ cityP: event.target.value });
    this.props.getInputCityValue(event.target.value);
  }

  render() {
    return (
      <form className='row form'>        
            <label className='col-4 form__label' htmlFor='surnameMembers'>Фамилия</label>
            <input className='col-6 form-control' id='surnameMembers' name='surnameMembers'
              type='text' required value={this.state.surnameP}
              onChange={this.handleSurnameChange}
            />          
            <label className='col-4 form__label' htmlFor='nameMembers'>Имя</label>
            <input className='col-6 form-control' id='nameMembers' name='nameMembers'
              type='text' required value={this.state.nameP}
              onChange={this.handleNameChange}
            />
            <label className='col-4 form__label' htmlFor='cityMembers'>Город</label>
            <input className='col-6 form-control' id='cityMembers' name='cityMembers'
              type='text' required value={this.state.cityP}
              onChange={this.handleCityChange}
            />        
      </form>
    );
  }
}

Footer.jsx

const propTypes = {  
  addToDatabase: PropTypes.func
};

class Footer extends Component {
  constructor(props) {
    super(props);
    this.handleSave = this.handleSave.bind(this);   
  }

  handleSave(e) {
    e.preventDefault();
    this.props.addToDatabase();
  }

  render() {
    return (
      <footer className='footer'>
        <div className='container-fluid'>         
                <a className='btn btn-raised btn-warning btn_icon-action btn_icon-action_save' href='#' role='button'
                  onClick={this.handleSave}
                >
                  Сохранить
                </a>     
        </div>
      </footer>
    );
  }
}

Answer 1

[Роман Александрович]

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {         
      newPerson: {
      }
    };
    this.getInputNameValue = this.getInputNameValue.bind(this);
    this.getInputSurnameValue = this.getInputSurnameValue.bind(this);
    this.getInputCityValue = this.getInputCityValue.bind(this);
    this.addToDatabase = this.addToDatabase.bind(this);
  }

  setNewPerson=(user)=>{
this.setState({
newPerson:user
})
}

  addToDatabase() {
    fetch(`http://127.0.0.1:3000/add/${this.state.newPerson}`, {
      method: 'PUT'
    })
      <...>
  }

  render() {
    return (
      <div>      
        <InputForm setNewPerson={this.setNewPerson} />          
        <Footer addToDatabase={this.addToDatabase}/>
      </div>
    );
  }
}
class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user:{
      nameP: '',
      surnameP: '',
      cityP: '',
      value: ''
}
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleSurnameChange = this.handleSurnameChange.bind(this);
    this.handleCityChange = this.handleCityChange.bind(this);    
  }

  handleNameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{nameP:event.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user);
  }

  handleSurnameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{surnameP:e.target.value})
    this.setState({ user: newUser });
   this.props.setNewPerson(this.state.user)
  }

  handleCityChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{cityP:e.target.value})
    this.setState({ user: newUser });
    this.props.setNewPerson(this.state.user)
  }

  render() {
    return (
      <form className='row form'>        
            <label className='col-4 form__label' htmlFor='surnameMembers'>Фамилия</label>
            <input className='col-6 form-control' id='surnameMembers' name='surnameMembers'
              type='text' required value={this.state.surnameP}
              onChange={this.handleSurnameChange}
            />          
            <label className='col-4 form__label' htmlFor='nameMembers'>Имя</label>
            <input className='col-6 form-control' id='nameMembers' name='nameMembers'
              type='text' required value={this.state.nameP}
              onChange={this.handleNameChange}
            />
            <label className='col-4 form__label' htmlFor='cityMembers'>Город</label>
            <input className='col-6 form-control' id='cityMembers' name='cityMembers'
              type='text' required value={this.state.cityP}
              onChange={this.handleCityChange}
            />        
      </form>
    );
  }
}

Comments

[aznhautroalvyl]

Спасибо (:

Answer 2

[real2210]

Храните value инпутов в ваших стейтах с помощью такого метода. (прим. из оф. руководоства)

handleInputChange(event) {
    const target = event.target;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }