Материал-УИ: текстовые поля внутри шаговых не принимает их defaultValues ​​правильно

Question

Вот ссылка на материал-Ui шаговых: http://www.material-ui.com/#/components/stepper

Я пытаюсь использовать три этапа шагового, на каждом этапе у меня есть материал-щ текстовое поле с заданным значением по умолчанию.

На шаге 1 я могу видеть, что значение по умолчанию для текстовых полей указано как Initial title value, но последующие шаги не соответствуют их предоставленным значениям по умолчанию, вместо этого они отображают Initial title value как их значение по умолчанию. В то время как текст заголовка и флотирования изменяется, их значение по умолчанию берется из шага 1, почему так?

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/