javascript - handleSubmit 和 onChange handlerSubmit 导致 setState 错误或无法输入字符

Question

我是 React 新手，似乎在处理提交和 onChange 时遇到错误。它可以正确处理三个事件(我最终希望它能被问到一个问题，然后条件语句将您带到下一个问题)。

当我尝试解决此问题时，遇到了三个不同的错误。我有handleChange 影响三个不同文本输入的onChange。如果我在我的输入上尝试这个

onChange={this.handleChange.bind(this, 'input1')}

handleChange 为:

      handleChange(name, event) {
    const change = {};
    change[name] = event.target.value;
    this.setState(change);
    // this.setState({ value: event.target.value });
    event.preventDefault();
  }

我无法在文本输入中输入任何内容，因为它似乎已被卡住。如果我将顺序更改为

handleChange(event, name) 我收到错误:

类型错误:无法读取未定义的属性“值”

如果我尝试这种方式(如下)，它会起作用，但是当我在任何输入中输入文本时，它会同时更改所有输入。我不知道如何解决这个问题。我想做的是能够将输入单独放入多个文本输入中。

此外，React.js 中的条件对我来说仍然有点困难，我不知道如何编写它，当第一个输入被应答并提交时，它会转到下一个输入。

这是正在运行的代码(有点)，但在所有三个输入中同时更新

    import React, { Component } from 'react';
    import styled from 'styled-components';
    import Crawler from './crawler';
    
    const NextQuestion = styled.div`
      position: absolute;
      color: white;
      display: block;
      margin-top: 108px;
    `;
    
    class NameForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 'enter proper name',
          value2: 'noun',
          value3: 'enter another proper name',
          newValue: '',
          submitted: false,
          input1: 0,
          input2: 0,
          input3: 0
        };
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    
      handleChange(event) {
        this.setState({
          value: event.target.value,
          value2: event.target.value2,
          value3: event.target.value3
        });
        event.preventDefault();
      }
    
      handleSubmit(event) {
        event.preventDefault();
        console.log('submit worked!!!');
        let toggle = this.state.visable;
        this.setState({ visable: !toggle });
      }
    
      render() {
        const divStyle = {
          marginTop: '50px',
          color: 'white',
          top: '25px',
          position: 'absolute'
        };
        let question = null;
        const show = this.state.visable;
        if (show) {
          question = (
            <div>
              <Crawler
                properName1={this.state.value}
                noun1={this.state.value2}
                properName2={this.state.value3}
              />
            </div>
          );
        }
        return (
          <div>
            <div style={divStyle}>
              <form onSubmit={this.handleSubmit}>
                <label>
                  Proper Name:
                  <input
                    name="input1"
                    type="text"
                    value={this.state.value}
                    onChange={this.handleChange}
                  />
                </label>
                <label>
                  Noun:
                  <input
                    name="input2"
                    type="text"
                    value={this.state.value2}
                    onChange={this.handleChange}
                  />
                </label>
                <label>
                  Another Proper Name:
                  <input
                    name="input3"
                    type="text"
                    value={this.state.value3}
                    onChange={this.handleChange}
                  />
                </label>
                <input type="submit" value="Submit" />
              </form>
            </div>
            <NextQuestion>
              {question}
            </NextQuestion>
          </div>
        );
      }
    }
    
    export default NameForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

请帮忙。

Answer 1

首先，function.prototype.bind 首先传递绑定(bind)的参数，然后传递其他参数。只是在接收争论和处理问题时要记住的一点。这里引用function.prototype.bind()

其次，我喜欢这种方法，您希望维护一个函数handleChange来更新所有输入的状态，但您实现了错误。我为每个输入进行了单独的 onChange 函数调用，并将它们全部绑定(bind)到同一个函数 handleChange，并在 ES6 函数绑定(bind)的帮助下传递了一个附加参数。并且您不需要显式地将 this 绑定(bind)到您的函数，因为 ES6 Fat Arrows 会处理这个问题。看看ES6 arrow bindings .

第三，我更新了handleChange函数，只更新发生变化的值，避免了其他输入值不必要的状态变化。

我已经提供了正确的解决方案，希望这对您有用。

import React, { Component } from 'react';
import styled from 'styled-components';
import Crawler from './crawler';

const NextQuestion = styled.div`
  position: absolute;
  color: white;
  display: block;
  margin-top: 108px;
`;

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: 'enter proper name',
      value2: 'noun',
      value3: 'enter another proper name',
      newValue: '',
      submitted: false,
      input1: 0,
      input2: 0,
      input3: 0
    };

    this.handleFirstChange = (event) =>   this.handleChange(event, 'value1');
    this.handleSecondChange = (event) => this.handleChange(event, 'value2');
    this.handleThirdChange = (event) => this.handleChange(event, 'value3');
    this.handleSubmit = (event) => this._handleSubmit(event);
  }

  handleChange(event, type) {
    let newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
  }

  _handleSubmit(event) {
    event.preventDefault();
    console.log('submit worked!!!');
    let toggle = this.state.visable;
    this.setState({ visable: !toggle });
  }

  render() {
    const divStyle = {
      marginTop: '50px',
      color: 'white',
      top: '25px',
      position: 'absolute'
    };
    let question = null;
    const show = this.state.visable;
    if (show) {
      question = (
        <div>
          <Crawler
            properName1={this.state.value1}
            noun1={this.state.value2}
            properName2={this.state.value3}
          />
        </div>
      );
    }
    return (
      <div>
        <div style={divStyle}>
          <form onSubmit={this.handleSubmit}>
            <label>
              Proper Name:
              <input
                name="input1"
                type="text"
                value={this.state.value1}
                onChange={this.handleFirstChange}
              />
            </label>
            <label>
              Noun:
              <input
                name="input2"
                type="text"
                value={this.state.value2}
                onChange={this.handleSecondChange}
              />
            </label>
            <label>
              Another Proper Name:
              <input
                name="input3"
                type="text"
                value={this.state.value3}
                onChange={this.handleThirdChange}
              />
            </label>
            <input type="submit" value="Submit" />
          </form>
        </div>
        <NextQuestion>
          {question}
        </NextQuestion>
      </div>
    );
  }
}

export default NameForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>