Question

我是React JS中的nwebie。我正在尝试从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

直接修改状态将不起作用。您应该直接设置它的唯一地方是在构造函数中分配初始状态。在其他任何地方，您都需要使用this.setState来通知组件重新检查状态以进行可能的重新渲染：

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

Answer 2

我相信您需要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 3

    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>



      );

      }

      }

      }

React JS：无法捕获已编辑的值

3 个答案: