Как получить входное значение в функциональном компоненте в React. js? (TypeError: невозможно прочитать свойство 'target' из undefined) - PullRequest
Новая
       0

Как получить входное значение в функциональном компоненте в React. js? (TypeError: невозможно прочитать свойство 'target' из undefined)

0 голосов
/ 09 мая 2020

Я пытаюсь добавить данные в Cloud Firestore, но получаю эту ошибку при нажатии кнопки 

TypeError: Cannot read property 'target' of undefined

вот код. 

    function Note(props) {

      function ReplyAnswer(e)
      {

        var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');

        firebase.firestore().collection('qna2dreply').add(
            {
                rcontent: e.target.value,
                replyby: userName,
                replybyid: userID,
                replytoid: props.id,
                time: new Date(),
                time2: date
            })
            .then(() => {
                document.getElementById('xxx').value = '';
                swal("Successfully Replied to "+props.title);
            });
      }


      return (
        <div>
        <div className="note">
          <h1>{props.title} <span className="time"> {(props.time).toString()}</span></h1>
          <p>{props.content} 
             <input 
             className="replyForminput" 
             name="content" 
             required 
             placeholder={'Reply to '+props.title} 
             autoCorrect="off" 
             autoComplete="off" /> 

             <button onClick={() => { ReplyAnswer() }} 
              className="replyBtn"> Reply </button></p>
              {props.id == idx ? (<div><RBox /></div>) : null}
        </div>
        </div>
      );
      }

Пожалуйста, помогите

................................................ .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ........

Ответы [ 3 ]

0 голосов
/ 09 мая 2020

e.target.value не определено, потому что событие (e) не передается из обработчика событий (ReplyAnswer).

Просто изменить: button onClick = {() => { ReplyAnswer () } }

To: button onClick = {( e ) => ReplyAnswer ( e )}

Это обеспечивает правильную передачу события. Обратите внимание, что фигурные скобки удалены, чтобы обработчик кликов не возвращал undefined.

Ура,

0 голосов
/ 09 мая 2020 

function ReplyAnswer(value)
      {

        var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');

        firebase.firestore().collection('qna2dreply').add(
            {
                rcontent:value,
                replyby: userName,
                replybyid: userID,
                replytoid: props.id,
                time: new Date(),
                time2: date
            })
            .then(() => {
                document.getElementById('xxx').value = '';
                swal("Successfully Replied to "+props.title);
            });
      }

1.add an id attribute in your input element eg:<input type="text" id="your_field_id" value="hellow"/>
2. Write your action button like this : <button onClick={(e)=>ReplyAnswer(document.getElementById("your_field_id").value)}>Click</button> 



3. You can use REFDOM follow this link
https://reactjs.org/docs/refs-and-the-dom.html
0 голосов
/ 09 мая 2020

Первый - для e это undefined:

Вы должны передавать ReplyAnswer только событию onClick из button, не переносите это в функции стрелки: 

<button onClick={ReplyAnswer} className="replyBtn"> Reply </button>

Это передаст объект события в ваш ReplyAnswer как параметр e. Если вы заключите свой ReplyAnswer в функцию стрелки и вызовете его без передачи ему каких-либо параметров, как то, что вы сделали: 

() => { ReplyAnswer() }

, вы можете увидеть, что ReplyAnswer не получает параметров, поэтому ваш e равно undefined. Ваша стрелочная функция также является функцией с нулевым параметром, поэтому она не будет получать объект события из события onClick.

Второй - для e.target.value это null:

Поскольку вы вызываете ReplyAnswer в событии onClick из button, поэтому e.target.value равно null.

Чтобы решить эту проблему, вы можете обернуть свои input и button внутри form, например: 

<form onSubmit={ReplyAnswer}>
  <input 
    className="replyForminput" 
    name="content" 
    required 
    placeholder={'Reply to '+props.title} 
    autoCorrect="off" 
    autoComplete="off" /> 
  <button type="submit" className="replyBtn"> Reply </button>
</form>

Добавьте type="submit" в свой button и переместите ReplyAnswer из onClick события button в onSubmit из form. Не забудьте добавить свойство name для ввода.

Затем в своем ReplyAnswer сделайте следующее: 

function ReplyAnswer(e) {
  e.preventDefault();
  var data = new FormData(e.target);
  var rcontent = data.get("content"); // your input `name` property is `content`

  var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');
  firebase.firestore().collection('qna2dreply').add({
    rcontent,
    replyby: userName,
    replybyid: userID,
    replytoid: props.id,
    time: new Date(),
    time2: date
  }).then(() => {
    document.getElementById('xxx').value = '';
    swal("Successfully Replied to "+props.title);
  });
}

Интерфейс FormData предоставляет способ легко создать набор пар ключ / значение, представляющих поля формы и их значения. Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/API/FormData.

...