首页 > 解决方案 > 如何在 react.js 的功能组件中获取输入值?(类型错误:无法读取未定义的属性“目标”)

问题描述

我正在尝试将数据添加到 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>
      );
      }

请帮忙

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

标签: javascriptreactjsfirebasegoogle-cloud-firestore

解决方案


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


推荐阅读