如何在 react.js 的功能組件中獲取輸入值？ （類型錯誤：無法讀取未定義的屬性“目標”）

Question

我正在嘗試將數據添加到 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>
      );
      }

請幫忙

..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ……

Answer 1

首先 - 對於e undefined ：

您應該只將ReplyAnswer傳遞給button的onClick事件，不要將其包裝在箭頭 function 中：

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

這會將事件ReplyAnswer作為e參數傳遞給您的 ReplyAnswer。 如果您將ReplyAnswer包裝在箭頭 function 中，並在不向其傳遞任何參數的情況下調用它，就像您所做的那樣：

() => { ReplyAnswer() }

您可以看到ReplyAnswer沒有收到任何參數，因此您的e是undefined 。 你的箭頭 function 也是一個零參數 function，所以它不會收到來自onClick事件 object 的事件。

第二 - 對於e.target.value是null ：

因為您在button的onClick事件中調用ReplyAnswer ，所以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從button的onClick事件移動到form的onSubmit事件。 記住也要添加輸入的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 。

Answer 2

e.target.value 未定義，因為事件 (e) 沒有從事件處理程序 (ReplyAnswer) 傳遞。

只需更改： button onClick={() => { ReplyAnswer() } }

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

這確保事件正確傳遞。 注意花括號被移除以防止從單擊處理程序返回未定義。

干杯，

Answer 3

 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