Как я могу отобразить элементы, когда реквизиты также пройдены? - PullRequest
Новая
       33

Как я могу отобразить элементы, когда реквизиты также пройдены?

0 голосов
/ 24 февраля 2020

Я использую несколько текстовых полей в своем коде, и я хочу отобразить их вместо того, чтобы писать их несколько раз. Тем не менее, я не могу сделать, так как мои текстовые поля также требуют элементов из реквизита конструктора. 

import React, { Component, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import PermanentDrawerLeft from '../../components/drawer/drawer';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

export default class AddUserPage extends Component <{}, { firstName: string, lastName: string, email: string,phone: string,password: string }>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      phone: '',
      email: '',
      password: '',
    };
  }


  render() {
    return (
      <div>
     <PermanentDrawerLeft></PermanentDrawerLeft>
     <div className='main-content'>
     <form className="form" noValidate autoComplete="off">

     {

       <TextField id="outlined-basic" label="First Name" variant="outlined" onChange={e => {
                this.setState({firstName: e.target.value})
              }}/>
     </form>
     </div>
   </div>
    );
  }
}

Если я использую следующее отображение: 


     {
              [{ label: 'First Name', state: this.state.firstName }].map((item, index) => (
                <TextField
                  id="outlined-basic"
                  label={item.label}
                  variant="outlined"
                  onChange={e => this.setState({ [item.state]: e.target.value })}
                />
              ))
            }

Я получаю эту ошибку в последней строке: 

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type '{

Код Песочница: https://codesandbox.io/s/goofy-cray-o87fm?fontsize=14&hidenavigation=1&theme=dark

1 Ответ

1 голос
/ 24 февраля 2020

Я вижу несколько синтаксических проблем с вашим вторым фрагментом:

  • вы не должны заключать firstName в фигурные скобки внутри литерала объекта ([{label: 'First Name', state: 'firstName'}])
  • для динамического c свойство объекта, вы должны заключить его в квадратные скобки, например: this.setState({[item.state]: e.target.value})
  • также вы получили закрывающую квадратную скобку, отсутствующую в исходном массиве

Итак, код вы должны были попробовать что-то вроде: 

{
    [{label: "First Name", state: 'firstName'}].map(item, index) => (
        <TextField
          id="outlined-basic"
          key={index}
          label={item.label}
          variant="outlined"
          onChange={e => this.setState({[item.state]: e.target.value} as any)}
        />
    ))
}

ps это выводы, которые я могу сделать, не видя более широкий контекст кода

...