使用参考值获取帖子形式

时间:2018-12-01 16:55:13

标签: node.js reactjs forms express

我正在对具有react和node的ToDoList进行培训,我再次需要您帮助我的新手对接。

我正在尝试以这种形式发送数据:

import React, { Component } from 'react';

class ToDoForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
       event.preventDefault();

        fetch('http://127.0.0.1:3000/add', {
            method: 'post',
            body: {
                what: this.refs.what.value, 
                when: this.refs.when.value, 
            }
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                New task : 
                <label htmlFor="what"> Enter what</label>
                <input id="what" ref="what" name="what" type="text" required/>

                <label htmlFor="when">Enter when</label>
                <input id="when" ref="when" name="when" required/>

                <button>Send data!</button>
            </form>
        );
    }
}

export default ToDoForm;

但是在服务器端,我无法获取req.body:

app.post('/add', (req, res) => {

    console.log(req.body);

    db.collection('task').countDocuments( (err, count) => {
        if (err) console.log(err);

        db.collection('task').insertOne({
            id : count + 1,
            what : req.body.what,
            when : req.body.when,
            done : false
        });
    });
    res.send('The \"' + req.body.what + '\" task has been added.');
});

我很确定这已经回答了很多次,但是我想我的搜索能力很有限。 如果这不合适,我愿意改变自己的做事方式。

2 个答案:

答案 0 :(得分:0)

您不需要引用,它应该具有以下形式的值:

event.target.elements.what.value
event.target.elements.when.value

refs doc所说的第一件事就是不要使用它们,除非这是唯一可能的方法。

答案 1 :(得分:0)

这不是创建引用的方式(阅读https://reactjs.org/docs/refs-and-the-dom.html

代码中的快速解决方法是

// class used for the callback with the texture
class AndroidBitmapPluginCallback : AndroidJavaProxy
{
    public AndroidBitmapPluginCallback() : base("com.unityexport.ian.unitylibrary.PluginInterfaceBitmap") { }
    public BrowserView BrowserView;

    public void onFrameUpdate(AndroidJavaObject jo, int width, int height, bool canGoBack, bool canGoForward)
        {
        AndroidJavaObject bufferObject = jo.Get<AndroidJavaObject>("Buffer");
        byte[] bytes = AndroidJNIHelper.ConvertFromJNIArray<byte[]>(bufferObject.GetRawObject());
        if (bytes == null)
            return;
        if (BrowserView != null)
        {
            UnityThread.executeInUpdate(()=> BrowserView.SetTexture(bytes,width,height,canGoBack,canGoForward));
        }
        else
            Debug.Log("TestAndroidPlugin is not set");

    }
 }


public class BrowserView : MonoBehaviour {
// Browser view needs a RawImage component to display webpages


   void Start () {
        _imageTexture2D = new Texture2D(Screen.width, Screen.height, TextureFormat.ARGB32, false);
        _rawImage = gameObject.GetComponent<RawImage>();
        _rawImage.texture = _imageTexture2D;

        #if !UNITY_EDITOR && UNITY_ANDROID
        // Get your Java class and create a new instance
        var tempAjc = new AndroidJavaClass("YOUR_LIBRARY.YOUR_CLASS")
        _ajc = tempAjc.CallStatic<AndroidJavaObject>("CreateInstance"); 
        // send the callback object to java to get frame updates
        AndroidBitmapPluginCallback androidPluginCallback = new AndroidBitmapPluginCallback {BrowserView = this};
        _ajc.Call("SetUnityBitmapCallback", androidPluginCallback);
        #endif

    }
   // Android callback to change our browser view texture
    public void SetTexture( byte[] bytes, int width, int height, bool canGoBack, bool canGoForward)
    {

        if (width != _imageTexture2D.width || height != _imageTexture2D.height)
            _imageTexture2D = new Texture2D(width, height, TextureFormat.ARGB32, false);

        _imageTexture2D.LoadImage(bytes);
        _imageTexture2D.Apply();
        _rawImage.texture = _imageTexture2D;
    }
}

并将其用作

// $row['id'] = "123";
('.'\'mydiv'.$row['id'].'\''.')

另一种方法是预先使用onClick="PrintElem('mydiv123') 并将其传递给<label htmlFor="what"> Enter what</label> <input id="what" ref={el=>this.what=el} name="what" type="text" required/> <label htmlFor="when">Enter when</label> <input id="when" ref={el=>this.when=el} name="when" required/> 属性。

body: {
    what: this.what.value, 
    when: this.when.value, 
}