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

将此作为受控组件。在您的组件中提供一个初始状态，所有更新后的状态都将变成状态，并直接反映到您的组件中。

初始状态：

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

输入字段

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

Answer 3

最好的方法是让一个主要组件从任何api（在您的情况下为firebase）和第二个子组件中获取数据，这些子组件负责将输入作为props并在action形式上返回输入（默认/修改）（提交）。这样，如果数据更改，您将获得修改后的数据，否则将获得默认数据。

 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 4

onChange仅在输入值更改时触发。可以在初始状态下定义defaultValue，并且当输入的值更改时，defaultValue将被覆盖。

如果您不想更改默认值，如何将默认值传回输入值？

4 个答案: