Question

我正在使用React框架处理SPFx。我也在使用MS Fabric Textbox controls。我创建了一个界面，如下所示

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,
    }))
  }

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

添加新行时，以前的值不会保留在ReactJS中

0 个答案: