Добавьте пользовательские входные данные для отображения в таблице, используя реагирование js и избыточность

Question

Есть два пользовательских поля ввода текста, и я хочу показать эти данные в таблице с использованием избыточности.

<tbody>
    <tr key={key}>
     <td>
       <TextField
         id="FirstName"
         label="First Name"
         type="name"
         value={this.state.fname}                                           
        />
      </td>
      <td>
       <TextField
         id="LastName"
         label="Last Name"
         type="name"
         value={this.state.lastname}                                            
        />
     </td>
   </tr>

Добавить иконку

Answer 1

Here is the solution,
Firstly To render it on a browser set the default values to your state variables.
constructor(props){
super(props);
this.state = {
fname : 'Foo ',
lastname : 'Bar',
}

}

Now, your code will get the value from state and it will render in DOM as you wanted. And use **defaultValue** in place of Value in input. Attribute 'value' is used when you are setting the values onChange but as you have already declared above in state , use **defaultValue** .

Как я сделал ниже: -

<TextField
 id="FirstName"
 label="First Name"
 type="name"
 defaultValue={this.state.fname}                                           
  />