1

Olá, estou tentando "popular" um textarea com um valor, mas quando tento editar o campo e ele não permite. Já tentei utilizar a propriedade "defaultValue" mas o campo fica vazio. Segue partes do codigo:

class TaskForm extends React.Component {

    constructor(props) {
        super(props);

        this.apis = new APIs();
        this.state = {
            taskEdit: [],
            title: '',
            description: '',
            project: '',
            service: '',
            date: moment(),
        };

    }

    componentDidMount() {
        this.setState({ isLoading: true });

        this.apis.editTask(this.props.location.state.id)//usar isso aqui
            .then(taskEdit => {

                return this.setState({
                    taskEdit: taskEdit ? taskEdit : {},
                    isLoading: false
                });
            });

    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
    }

    render() {
        const { taskEdit } = this.state;
        const { history } = this.props;

        return (
            <Layout history={history} styleName='container'>
            <aside>
                {taskEdit.title}
                {taskEdit.description}
            </aside>
                <main>
                    <h1>{this.state.id}</h1>
                    <form onSubmit={this.handleSubmit}>
                        <h2>Edit Task</h2>
                        <br/>
                        <span>
                            Title:
                            <input defaultValue={taskEdit.title} type="text" size="100" className='title' name='title' onChange={this.handleChange}/>
                        </span>
                        <br/>
                        <br/>
                        <span>
                            Description:
                            <textarea value={taskEdit.description} type="text" className='description' name='description' onChange={this.handleChange}/>
                        </span>
                        <br/>
                        <br/>
                    </form>
                </main>

                <aside>

                </aside>
            </Layout>
        );
    }
}

export default TaskForm;

Fica assim: inserir a descrição da imagem aqui Alguém tem alguma dica?

1
  • Não sei se tem a ver mas.... <textarea> não suporta o value atributo.
    – hugocsl
    Commented 26/09/2019 às 18:44

2 Respostas 2

0

Olá, a função que vai lidar com a alteração do textarea deve ser iniciada no constructor, exemplo:

...
    this.state = {
      taskEdit: [],
      title: '',
      description: '',
      project: '',
      service: '',
      date: moment(),
    };

    this.handleChange = this.handleChange.bind(this);
  }
...

Isso acontece por uma questão de escopo das funções em JavaScript.

Seu método handlerChange precisa acessar o this do componente criado e usando o método bind no constructor nós conseguimos resolver este problema dizendo através do bind que o this da função é o mesmo do constructor.

0

O problema é como você está fazendo, código sem necessidade e variaveis com mesmo nome fazendo coisas diferentes, para simplificar eu montei um exemplo minimo:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      t1: 'a',
      t2: 'b'
    };
    this.handlerOnChange = 
      this.handlerOnChange.bind(this);
  }
  handlerOnChange(e) {
    const {name, value} = e.target;
    this.setState({[name]: value});
  }
  render() {
    const {t1, t2} = this.state;
    return (
      <div>
      <div>
        <input type="text" name="t1" value={t1} onChange={this.handlerOnChange} /> {t1}
      </div>
      <div>
        <textarea name="t2" value={t2} onChange={this.handlerOnChange}/> {t2}
      </div>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Percebe que tanto o input e o textarea compartilham do mesmo método de alteração e nesse caso não pode esquecer de colocar o mesmo nome das tags com os da variáveis do .

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .