Question

以下是material-ui stepper的链接：http://www.material-ui.com/#/components/stepper

我正在尝试使用三步步进器，在每个步骤中我都有一个带有默认值设置的材料-ui文本字段。

在第1步，我可以看到我的文本字段默认值为Initial title value，但后续步骤并未遵守其提供的默认值，而是显示Initial title value作为默认值。当他们的标题和浮动文本被更改时，他们的默认值取自step1，为什么会这样？

import React from 'react';
import {
  Step,
  Stepper,
  StepLabel,
} from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

/**
 * Horizontal steppers are ideal when the contents of one step depend on an earlier step.
 * Avoid using long step names in horizontal steppers.
 *
 * Linear steppers require users to complete one step in order to move on to the next.
 */
class HorizontalLinearStepper extends React.Component {

  state = {
    finished: false,
    stepIndex: 0,
  };

  handleNext = () => {
    const {stepIndex} = this.state;
    this.setState({
      stepIndex: stepIndex + 1,
      finished: stepIndex >= 2,
    });
  };

  handlePrev = () => {
    const {stepIndex} = this.state;
    if (stepIndex > 0) {
      this.setState({stepIndex: stepIndex - 1});
    }
  };

  getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return (
        <TextField
            id="1"
            hintText="Title"
            floatingLabelText="Title"
            type="text"
            ref = "title"
            errorText= {errors.title}
            fullWidth={true}
            defaultValue="Initial title value"
        />

        );
      case 1:
        return (
        <TextField
            id="2"
            hintText="Description"
            floatingLabelText="description"
            type="text"
            ref = "description"
            errorText= {errors.description}
            fullWidth={true}
            defaultValue="Initial description value"
        />

        );
      case 2:
        return (
        <TextField
            id="3"
            hintText="Name"
            floatingLabelText="name"
            type="text"
            ref = "name"
            errorText= {errors.name}
            fullWidth={true}
            defaultValue="Initial name value"
        />

        );
      default:
        return 'You\'re a long way from home sonny jim!';
    }
  }

  render() {
    const {finished, stepIndex} = this.state;
    const contentStyle = {margin: '0 16px'};

    return (
      <div style={{width: '100%', maxWidth: 700, margin: 'auto'}}>
        <Stepper activeStep={stepIndex}>
          <Step>
            <StepLabel>Select campaign settings</StepLabel>
          </Step>
          <Step>
            <StepLabel>Create an ad group</StepLabel>
          </Step>
          <Step>
            <StepLabel>Create an ad</StepLabel>
          </Step>
        </Stepper>
        <div style={contentStyle}>
          {finished ? (
            <p>
              <a
                href="#"
                onClick={(event) => {
                  event.preventDefault();
                  this.setState({stepIndex: 0, finished: false});
                }}
              >
                Click here
              </a> to reset the example.
            </p>
          ) : (
            <div>
              <p>{this.getStepContent(stepIndex)}</p>
              <div style={{marginTop: 12}}>
                <FlatButton
                  label="Back"
                  disabled={stepIndex === 0}
                  onTouchTap={this.handlePrev}
                  style={{marginRight: 12}}
                />
                <RaisedButton
                  label={stepIndex === 2 ? 'Finish' : 'Next'}
                  primary={true}
                  onTouchTap={this.handleNext}
                />
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default HorizontalLinearStepper;

Answer 1

使用状态变量和defaultValue（）方法代替ref和onChange，它将解决您的问题，试试这个：

 this.state = {
     stepIndex: 0,
     name: 'Initial Name',
     desc: 'Initial Description',
     title: 'Initial Title'
}

_getStepContent(stepIndex) {
   switch (stepIndex) {
    case 0:
       return (
         <TextField
            hintText="Title"
            floatingLabelText="Title"
            type="text"
            value={this.state.title}
            onChange={this._handleTitleChange.bind(this)}
         />
       );
    case 1:
       return (
         <TextField
            hintText="Description"
            floatingLabelText="description"
            type="text"
            value={this.state.desc}
            onChange={this._handleDescChange.bind(this)}
         />
       );
    case 2:
      return (
         <TextField
            hintText="Name"
            floatingLabelText="name"
            type="text"
            value={this.state.name}
            onChange={this._handleNameChange.bind(this)}
         />
      );
    default: return 'Default Text';
   }
} 

_handleTitleChange(event,value){this.setState({title: value});}
_handleNameChange(event,value){this.setState({name: value});}
_handleDescChange(event,value){this.setState({desc: value});} 

render() {
    return (
       <div>

          <Stepper activeStep={this.state.stepIndex}>
             <Step>
                <StepLabel>Select campaign settings</StepLabel>
             </Step>
             <Step>
                <StepLabel>Create an ad group</StepLabel>
             </Step>
             <Step>
                <StepLabel>Create an ad</StepLabel>
             </Step>
          </Stepper>

         {this._getStepContent(this.state.stepIndex)}

         <p onClick={this.handlePrev.bind(this)}>Back</p>
         <p onClick={this.handleNext.bind(this)}>Next</p>

      </div>
   );
}

以下是完整工作示例的jsfiddle链接：https://jsfiddle.net/nswxrjsf/

Material-ui：stepper中的textfields没有正确获取其defaultValues

1 个答案: