Kode saya seperti di bawah ini -

Home.js

import React from 'react'
import AddNewTask from './../components/addNewTask'

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            addNewTask:{
                title:'',
                discription:'',
                deadline:new Date()
            },
        }

        this.handleNewTaskChange = this.handleNewTaskChange.bind(this)

    }

    handleNewTaskChange(event){
        //console.log(typeof(event))
        var evName,evValue;
        if(event.target){
        const{name,value} = event.target
        console.log(name,value)
        evName = name
        evValue = value
        }
        else{
            evName = "deadline"
            evValue = event
        }
        //console.log(evName,evValue)
        this.setState({
            addNewTask:{
                [evName]:evValue
            }
        })

    }
    render(){
         return(
             <div>
                        <AddNewTask 
                        newTask = {this.state.addNewTask}
                        handleChange = {this.handleNewTaskChange}
                        />
            </div>
        )
    }
}

tambahkanNewTask.js

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function AddNewTask(props) {
  return (
    <div>
      <form>
        <label>Task : </label>
        <input
          name='title'
          placeholder='Enter Task'
          value={props.newTask.title}
          onChange={props.handleChange}
        />
        <br />
        <label>Discription : </label>
        <textarea
          name='discription'
          placeholder='Enter Task Discription'
          value={props.newTask.discription}
          onChange={props.handleChange}
        />{' '}
        <br />
        <label>Deadline : </label>
        <DatePicker
          name='deadline'
          selected={props.newTask.deadline}
          onChange={(date) => props.handleChange(date)}
          minDate={new Date()}
        />
      </form>
    </div>
  );
}

export default AddNewTask;

Saya mendapatkan kesalahan ini -

index.js:1 Peringatan: Sebuah komponen mengubah input teks tipe yang dikontrol menjadi tidak terkontrol. Elemen input tidak boleh beralih dari terkontrol ke tidak terkontrol (atau sebaliknya). Putuskan antara menggunakan elemen input terkontrol atau tidak terkontrol untuk masa pakai komponen. Info lebih lanjut: https://reactjs.org/docs/forms.html#controlled-components

Juga, saya belum menambahkan fungsionalitas kirim.

0
ameya 28 Mei 2020, 15:25

1 menjawab

Jawaban Terbaik

Masalahnya terjadi di sini

<textarea   name="discription"
                                placeholder = "Enter Task Discription"
    // this value at first was '' and later became undefined which is what caused the warning
                                value = {props.newTask.discription}
                                onChange = {props.handleChange}
                    />

Masalahnya disebabkan oleh, karena ketika Anda mengatur deskripsi status menjadi tidak terdefinisi

 handleNewTaskChange(event){
        //console.log(typeof(event))
        var evName,evValue;
        if(event.target){
        const{name,value} = event.target
        console.log(name,value)
        evName = name
        evValue = value
        }
        else{
            evName = "deadline"
            evValue = event
        }
        //console.log(evName,evValue)
        this.setState({
            addNewTask:{
                [evName]:evValue
            }
        })

    }

Ini seharusnya

handleNewTaskChange(event){
        const description = event.target.value;

        this.setState(prvState => ({
            addNewTask:{
                ...prvState.addNewTask,
                description
            }
        }))

    }
3
ehab 28 Mei 2020, 12:39