0

我正在使用 React 框架使用 SPFx。我也在使用MS Fabric 文本框控件。我创建了一个如下界面

export interface ICurrentState {  
  expenseRows:any
}

我在构造函数中初始化这个接口。

public constructor(props: IExpenseClaimProps, state: ICurrentState) {
    super(props);
    this.state = {      
      expenseRows:[{Title:'',Category:'',Amount:'',Date:'',Details:''}]
    };
  }

我创建了一个如下所示的函数来添加行。

const ExpenseDetailField=(props)=>{
  const {Title,Category,Amount,Date,Details}=props;
  return(
    <div className='ms-Grid-row'>
      <div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'>
        <TextField required={true} label='Title' value={Title}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Category' value={Category}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Amount' value={Amount}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Expense Date' value={Date}/>
      </div>
      <div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'>
        <TextField required={true} label='Details' multiline value={Details}/>
      </div>
    </div>
  );

我正在添加以下函数render方法。

this.state.expenseRows.map((element,ind) => {                       
          return (            
            <ExpenseDetailField Title={element.Title} Category={element.Category} Amount={element.Amount} Date={element.Date} Details={element.Details} />
          );          
        })

而且我有按钮，它将触发adddExpenseDetailsRow添加新行的功能。

adddExpenseDetailsRow(){       
    const rows = [...this.state.expenseRows,{Title:'',Category:'',Amount:'',Date:'',Details:''}];
    this.setState(prevState=>({
      expenseRows:rows,
    }))
  }

到这里为止它工作正常。但是，如果我在文本框中填写一些值并单击 Addrow 按钮，则会添加新行，但是现有值正在消失。我在这做错了什么？

4

0 回答 0