Question

我有一个public static void main (String[]args) { String str = "MFD324FR"; char[] characters = str.toCharArray(); for(char c : characters){ if(Character.isDigit(c)) break; else System.out.print(c); } }，它有多个步骤，每个步骤都包含许多Stepper个。现在，当您更改步骤时，material-ui会卸载步骤内容，因此TextField中的所有数据都将丢失。

现在我的问题：

在我们改变步骤时，是否仍然保留/保存TextField s中的数据？

我不想：

使用redux保存表单的状态
使用任何第三方库，如redux-form
在父组件（步进器）中保存文本输入数据

这是我的垂直步进器，没什么特别的：

TextField

我正在使用：

Material-UI：0.15.4
反应：15.3.0
浏览器：Chrome 52.0.2743.116

Answer 1

我正在做一些与你非常相似的事情。可能有更好的方法，但我所做的是向我的StepContent子项添加一个“onChange”处理程序，它返回一个带有id和value的对象，然后我可以跟踪包含步进器的组件。

所以你的步进器容器可能如下所示：

class StepperContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      stepIndex: 0,
    };
    this.handleStepData = this.handleStepData.bind(this);
  }

  handleStepData(data) {
    console.log('data.id',data.id);
    console.log('data.value', data.value);
    this.storeData(data);
  }

  render() {
    <Paper style={{padding: 15, marginRight: 19}}>
        <Stepper activeStep={stepIndex} orientation="vertical">
            <Step>
                <StepLabel>Personnel Info</StepLabel>
                <StepContent>
                    <PersonalInfo ref="personalInfo" onChange={this.handleStepData}/>
                    {this.renderStepActions()}
                </StepContent>
            </Step>
            .
            .
            .
        </Stepper>
    </Paper>

您的<PersonalInfo>组件需要这样的方法：

handleChange(event, index, id, value) {
  .
  .
  .
  (Do some local processing)
  .
  .
  .
  this.props.onChange({value,id});
}

我还没有挖到Redux或类似的东西，但也许这可能是处理这类事情的更好方法。它们似乎经常出现，因为我正在创建一个React App并且管理起来很麻烦。

当活动步骤更改时，在Material-ui步进器中保留StepContent数据

1 个答案: