Реагировать JS: Невозможно захватить отредактированное значение

Question

Я новичок в React JS.Я пытаюсь перехватить отредактированное значение из formcontrol при изменении дескриптора и назначить его объекту состояния, а затем получить присвоить его переменной, чтобы передать как часть строки запроса в API для обновления поля, изменение дескриптора - этофункция вызывается из form-control для назначения отредактированного значения объекту состояния.Я не могу этого сделать. Пожалуйста, предоставьте ваш вклад, мы очень ценим вашу помощь. Я хотел бы сделать то же самое и в других областях.Спасибо.

import React, { PropTypes, Component } from 'react';
import {
  Panel,
  Button,
  PageHeader,
  ControlLabel,
  FormControl,
  Pagination,
  Form,
  Accordion,
  Col,
  Radio,
  FormGroup
} from 'react-bootstrap';
import StatWidget from '../../src/components/Widget';
import CRUDTable,
{
  Fields,
  Field,
  CreateForm,
  UpdateForm,
  DeleteForm,
} from 'react-crud-table';

const DescriptionRenderer = ({ field }) => <textarea {...field} />;

const styles = {
  container: { margin: 'auto', width: 'fit-content' },
};

class displayDetails extends Component {

  constructor (props) {
    super(props);
    this.state = {
      updatecustomer: [],
      delcustomer: [],
      field1 = '',
    };

    this.handleUpdate = this.handleUpdate.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleCreate = this.handleCreate.bind(this);
    this.handleChange = this.handleChange.bind(this);

  };

  handleChange (e) {
    this.state.field1 = e.target.value; // This isn't happening
  }

  render() {

    firstName=this.props.respData.FIELD1;
    lastName=this.props.respData.FIELD2;

    return (
      <div>
          <br></br>
          <div className="col-lg-3 col-md-6">
          <StatWidget
            style="panel-primary"
            icon="fa fa-dollar fa-5x"
            count={this.props.respData.FIELD1}
            headerText="FIELD1"
            linkTo=""
          />
          </div>
          <div className="col-lg-3 col-md-6">
          <StatWidget
            style="panel-green"
            icon="fa fa-phone   fa-5x"
            count={this.props.respData.FIELD2}
            headerText="FIELD2"
            linkTo=""
          />
          </div>
          <div className="col-lg-3 col-md-6">
          <StatWidget
            style="panel-yellow"
            icon="fa fa-home fa-5x"
            count={this.props.respData.FIELD3}
            headerText="FIELD3"
            linkTo=""
          />
          </div>
          <div className="col-lg-3 col-md-6">
          <StatWidget
            style="panel-red"
            icon="fa fa-shopping-bag fa-5x"
            count={this.props.respData.FIELD4}
            headerText="FIELD4"
            linkTo=""
          />
          </div>
          <div>
          <tr>
              <td><h1>{this.props.respData.FIELD1} {this.props.respData.FIELD2}</h1></td>
          </tr>
          </div>
          <div>
          <table>
            <tr>
              <td>
                <FormGroup style={spacing}>
                <ControlLabel>FIELD 1</ControlLabel>
                <FormControl onChange={((e) => this.handleChange(this.props.respData.FIELD1))}
                  value={this.props.respData.FIELD1}
                  id="field1" name="field1"
                  type="text"
                  placeholder="Enter Text"
                />
                </FormGroup>
              </td>
            </tr>
            <br></br>
          </table>
          </div>
          <br></br>
      </div>
    )
  }
}

export default displayDetails; 

Answer 1

Я полагаю, что вам нужен метод жизненного цикла setState().

handleChange(e){

  this.state.field1 = e.target.value; // This isn't happening

  this.setState({
    field1: e.target.value
  }); // this will update state and trigger rerender
}

Answer 2

    class displayDetails extends Component {

      constructor(props) {
        super(props);
        this.state = {
          state1: [],
          state2: [],
          state3: '',
          state4: '',
          state5: '',
          state6: '',
          state7: '',
          state8: '',
          state9: '',
          state10: '',

        };

        this.handleState1change = this.handleState1change.bind(this); 
        this.handleState2change = this.handleState2change.bind(this); 
        this.handleState3change = this.handleState3change.bind(this);
        this.handleState4change = this.handleState4change.bind(this);

        field1=this.props.respData.FIELD1;


        this.setState({state3:field1});

      };

      handlestate1change (e) {
       console.log('Inside handle state1 Change',e);
       this.setState({state3:e.target.value});
        console.log('state1 in handlestate1change',this.state.state3);
  }
      componentWillReceiveProps(){
        this.setState({state3:field1});
        console.log('newfirstName in Component will mount',this.state.state3);

      }


      render() {

      return(
                    <td>
                    <FormGroup style={spacing}>
                      <ControlLabel>Field1</ControlLabel>
                      <FormControl onChange={this.handleState1change}
                        value={this.state.state3}
                        id="field1" name="field1"
                        type="text"
                        placeholder="Enter Text"
                      />
                    </FormGroup>
                  </td>



      );

      }

      }

      }

Answer 3

Изменение состояния напрямую не будет работать.Единственное место, где вы должны установить его напрямую, это назначить начальное состояние в вашем конструкторе.В любом другом месте вам нужно использовать this.setState, чтобы уведомить ваш компонент о перепроверке состояния для возможного повторного отображения:

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