Question

这是我的代码，我不知道为什么，但是_onChangeValue函数总是返回代理对象而不是简单的字符串值。我的this.state.values是一个具有很多属性的长对象，这就是为什么我必须使用散布运算符，该函数接受两个参数来设置状态的原因，我尝试了很多次，甚至复制了创建者的代码但是不断失败，有什么解决办法吗？

这是功能

_onChangeValue = (name, value) => {
    this.setState(prevState => ({
      values: {
        ...prevState.values,
        [name]: value,
      },
    }));
  };

这些是文件

App.js

import React, { PureComponent } from 'react';

import Step from './Step';

export default class Wizard extends PureComponent {
  static Step = Step;

  state = {
    index: 0,

    values: {
      ...this.props.initialValues,
    },
  };

  _nextStep = () => {
    if (this.state.index !== this.props.children.length - 1) {
      this.setState(prevState => ({
        index: prevState.index + 1,
      }));
    }
  };

  _prevStep = () => {
    if (this.state.index !== 0) {
      this.setState(prevState => ({
        index: prevState.index - 1,
      }));
    }
  };

  _onChangeValue = (name, value) => {
    this.setState(prevState => ({
      values: {
        ...prevState.values,
        [name]: value,
      },
    }));
  };

  _onSubmit = () => {
    alert(JSON.stringify(this.state.values));
  };

  render() {
    console.log('values', this.state);
    return (
      <div style={{ flex: 1 }}>
        {React.Children.map(this.props.children, (el, index) => {
          if (index === this.state.index) {
            return React.cloneElement(el, {
              currentIndex: this.state.index,
              nextStep: this._nextStep,
              prevStep: this._prevStep,
              isLast: this.state.index === this.props.children.length - 1,
              onChangeValue: this._onChangeValue,
              values: this.state.values,
              onSubmit: this._onSubmit,
            });
          }

          return null;
        })}
      </div>
    );
  }
}

Wizard.js

 import React, { PureComponent } from 'react';

    import Step from './Step';

    export default class Wizard extends PureComponent {
      static Step = Step;

      state = {
        index: 0,

        values: {
          ...this.props.initialValues,
        },
      };

      _nextStep = () => {
        if (this.state.index !== this.props.children.length - 1) {
          this.setState(prevState => ({
            index: prevState.index + 1,
          }));
        }
      };

      _prevStep = () => {
        if (this.state.index !== 0) {
          this.setState(prevState => ({
            index: prevState.index - 1,
          }));
        }
      };

      _onChangeValue = (name, value) => {
        this.setState(prevState => ({
          values: {
            ...prevState.values,
            [name]: value,
          },
        }));
      };

      _onSubmit = () => {
        alert(JSON.stringify(this.state.values));
      };

      render() {
        console.log('values', this.state);
        return (
          <div style={{ flex: 1 }}>
            {React.Children.map(this.props.children, (el, index) => {
              if (index === this.state.index) {
                return React.cloneElement(el, {
                  currentIndex: this.state.index,
                  nextStep: this._nextStep,
                  prevStep: this._prevStep,
                  isLast: this.state.index === this.props.children.length - 1,
                  onChangeValue: this._onChangeValue,
                  values: this.state.values,
                  onSubmit: this._onSubmit,
                });
              }

              return null;
            })}
          </div>
        );
      }
    }

Step.js

import React, { PureComponent } from 'react';

class Step extends PureComponent {
  state = {};
  render() {
    return (
      <div>
        {this.props.children({
          onChangeValue: this.props.onChangeValue,
          values: this.props.values,
        })}
        <div>
          <button
            title="Prev"
            disabled={this.props.currentIndex === 0}
            onClick={this.props.prevStep}
          >Prev</button>
          {this.props.isLast ? (
            <button  onClick={this.props.onSubmit}></button>
          ) : (
            <button  onClick={this.props.nextStep}>Next</button>
          )}
        </div>
      </div>
    );
  }
}
export default Step;

Input.js

import React, { PureComponent } from 'react';

class Input extends PureComponent {
  _onChangeText = text => {
    this.props.onChangeValue(this.props.name, text);
  };

  render() {
    const { onChangeValue, name, ...rest } = this.props;
    return (
      <input {...rest} onChange={this._onChangeText} />
    );
  }
}

export default Input;

谢谢！

Answer 1

<input {...rest} onChange={this._onChangeText} />

事件对象作为第一个参数传递给_onChangeText，而不是输入字段中的文本。您可以从event.target.value获取文本。

<input {...rest} onChange={event => this._onChangeText(event.target.value)} />

React-带有传播运算符的setState返回一个代理对象

1 个答案: