javascript - 为什么我不能用 React 更新我的表单字段

Question

I'm new to React. I have used Create-react-app to create my app. Now I'm trying to connect it to my back-end REST APIs. I have done that successfully for simply getting and displaying data. Now I'm trying to enable updating data via a form. I'm following the Forms page on the React docs. I had an earlier problem which was due to using an object in my state, which I thought I solved via this answer with the snippet in the setState() inside handleChange(). But I think that may have something to do with my current problem, which is that the form input fields don't update when I try to type anything in them.

Here's my js page:

import React, { Component } from 'react';
import { Container } from 'reactstrap';
import AppNavbar from './AppNavbar';

class TradeConfig extends Component {

  constructor(props) {
    super(props);
    this.state = {tradeConfig: {}, isLoading: true};

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

  handleChange(event) {
    console.log("handleChange : " + event);
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState(oldState => {
      return {
        foo: Object.assign({}, oldState.tradeConfig, {[name]: value})
      }
    });
  }

  handleSubmit(event) {
      alert('A form was submitted: ' + this.state.tradeConfig);
      event.preventDefault();

      fetch(process.env.REACT_APP_API_URL+'/api/config', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state.tradeConfig)
      }).then(() => {
          fetch(process.env.REACT_APP_API_URL+'/api/config')
              .then(response => response.json())
              .then(data => this.setState({tradeConfig: data, isLoading: false}));
      });
  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch(process.env.REACT_APP_API_URL+'/api/config')
      .then(response => response.json())
      .then(data => this.setState({tradeConfig: data, isLoading: false}));
  }


  render() {
    const {tradeConfig, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div>
        <AppNavbar/>
        <Container fluid>
          <h3>Trade Config</h3>

            <form onSubmit={this.handleSubmit}>
                <label>Position Size: </label>
                    <input
                        name="positionSize"
                        type="number"
                        value={this.state.tradeConfig.positionSize}
                        onChange={this.handleChange} />
                <br/>
                <label>Actively Trading:
                    <input
                        name="activelyTrading"
                        type="boolean"
                        value={this.state.tradeConfig.activelyTrading}
                        onChange={this.handleChange} />
                </label>
                <br/>
                <input type="submit" value="Submit" />
            </form>

        </Container>
      </div>
    );
  }
}

export default TradeConfig;

I have confirmed via console.log that the handleChange is being called.

Answer 1

Try setting your state like this in handleChange .

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