Как связать "areaName" на <TexBox>vlaue = "" и onChange = "":?

Question

На самом деле я вызвал API, сопоставил массив и привязал данные к <TableCell>

 {this.state.allArea.map((allArea, i) => (
                    <TableRow >
                        <TableCell >{allArea.areaName}</TableCell>
                <TableCell  >{allArea.cityName}</TableCell>
                        <TableCell > <IconButton aria-label="edit" onClick= 
                  {this.addCoupon.bind(this)}  >
                                   <EditIcon />
                     </IconButton><IconButton aria-label="delete">
                        <DeleteIcon />
                       </IconButton></TableCell> </TableRow>
                 ))}

Но теперь я хочу отредактировать / обновить areaName, поэтому я создаю <TexBox>

       <Grid container spacing={8}>
                <Grid item md={12} sm={12} xs={12} >
                    <TextBox error='' value='' name="name" label="Area name" required={true} onChange={this.handleAreaChange.bind(this)} ></TextBox>
                </Grid>

            </Grid>

, но я не могу связать areaName в value="" и onChange=''

Answer 1

Определите как это

  <TextBox error='' value={areaName} 
   name="name" label="Area name" 
   required={true} onChange={this.handleAreaChange} >
  </TextBox>

handleAreaChange функция

  handleAreaChange=e=>{
   this.setState({areaName:e.target.value})
  }