Как передать значение по умолчанию обратно в качестве входного значения, если вы не хотите, чтобы значение было изменено?

Question

Я назначил значения по умолчанию для тега ввода. Когда я пытаюсь отправить без изменения значения входного тега, переданное значение не определено.

Я хочу, чтобы при изменении входного значения обновлялось значение состояния с новым значением, а если значение входного тега не изменялось, то передавалось значение по умолчанию в состояние.

Я новичок в React.

import React, { Component } from 'react';
import Firebase from '../Firebase';
import _ from 'lodash';
import '../App.css';


class Modify extends Component {
  constructor(props) {
    super(props);
    //state
    this.state = {
      personDetails: {},
      detail: ''
    };

    //bind
    this.renderData = this.renderData.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.saveEdit = this.saveEdit.bind(this);
  }

  //lifecycle
  componentDidMount() {
    Firebase.database().ref('/nannydetails').on('value', (snapshot) => {
      this.setState({
        personDetails: snapshot.val()
      })
    })
  }

  //handle change
  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value.toLowerCase()
    });
  }

  //render data
  renderData() {
    return _.map(this.state.personDetails, (personDetail, key) => {
      return(
        <div className="pt-2 pb-1 m-2 border border-dark bg-warning row" key={key}>
          <div className="col-md-3 col-xs-3 text-right">
            <img src={require('./profile.png')} alt="cam"/>
          </div>
          <div className="col-md-9 col-xs-9 p-2">
            <div className="headline">
              <h1>Full Name: </h1>
              <input className="form-control" type="text" name="fullName" defaultValue={personDetail.fullname} onChange={this.handleChange}/>
            </div>
            <div className="headline">
              <h1>Contact Number: </h1>
              <input className="form-control" type="text" name="phone" defaultValue={personDetail.phone} onChange={this.handleChange}/>
            </div>
            <div className="headline">
              <h1>Experience: </h1>
              <input className="form-control" type="text" name="experience" defaultValue={personDetail.experience} onChange={this.handleChange}/>
            </div>
            <div className="headline">
              <h1>City: </h1>
              <input className="form-control" type="text" name="city" defaultValue={personDetail.city} onChange={this.handleChange}/>
            </div>
            <div className="headline">
              <h1>State: </h1>
              <input className="form-control" type="text" name="state" defaultValue={personDetail.state} onChange={this.handleChange}/>
            </div>
            <button className="btn btn-success" type="button" onClick={() => this.saveEdit(key)}><i className="fa fa-pencil-square-o"></i> Save Edit</button>
            <button className="btn btn-danger" type="button" onClick={() => this.handleDelete(key)}><i className="fa fa-trash"></i> Delete</button>
          </div>
        </div>
      )
    });
  }

  //handle save edit
  saveEdit(key) {
    // Firebase.database().ref(`/nannydetails/${key}`).push({
    //   fullname: this.state.fullname,
    //   phone: this.state.phone,
    //   experience: this.state.experience,
    //   city: this.state.city,
    //   state: this.state.state
    // });
    console.log(this.state.fullname);
    console.log(this.state.phone);
    console.log(this.state.experience);
    console.log(this.state.city);
    console.log(this.state.state);
  }

  //handle delete
  handleDelete(key) {
    const user= Firebase.database().ref(`/nannydetails/${key}`);
    user.remove();
  }

  render() {
    return (
      <div className="container mt-4">
        {this.renderData()}
      </div>
    );
  }
}

export default Modify;

Answer 1

Обновление обработчика изменений для обновления / изменения существующего состояния вместо добавления нового свойства (ключа), т. Е. Для this.state.personDetails.X против this.state.X

//handle change
handleChange(event) {
  // update the personDetails object you set in state on mount
  const newPersonDetails = { ...this.state.personDetails };
  newPersonDetails[event.target.name] = event.target.value.toLowerCase();
  this.setState({
    personDetails: newPersonDetails,
  });
}

Answer 2

Лучший способ приблизиться к тому, чтобы основной компонент получал данные из любого API (firebase в вашем случае) и второго дочернего компонента, который будет отвечать за то, чтобы принимать входные данные как реквизиты и возвращать входные данные (по умолчанию / модифицированные) при действии формы (представить). Таким образом, если данные изменяются, вы получаете измененные данные, иначе как данные по умолчанию.

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

    this.state = {
        name: this.props.form.name,
    };

    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  submit(e) {
    e.preventDefault();
    console.log(this.state);
  }


  handleChange(e) {
    this.setState({name: e.target.value});
  }

  handleChan
  render() {
        return (
        <div>
          <form onSubmit={this.submit}>
          <input 
            type="text" 
            value={this.state.name} 
            onChange={this.handleChange} 
          />
            <button type="submit">Submit</button>
          </form>
        </div>
    );
  }
}

См., Например, эту скрипку. https://jsfiddle.net/papish19/ys6utv3k/7/

Answer 3

onChange срабатывает только при изменении значения ввода. DefaultValue может быть определено в начальном состоянии, а defaultValue перезаписывается при изменении значения ввода.

Answer 4

Сделать это контролируемым компонентом. Укажите начальное состояние в вашем компоненте, и все обновленные данные будут преобразованы в состояние, которое непосредственно отразится на вашем компоненте.

Начальное состояние:

this.state = {
      personDetails: {
        fullname :'test'
      },
      detail: ''
    };

Поле ввода

input className="form-control" type="text" name="fullName" value={this.state.personDetail.fullname} onChange={this.handleChange}