Question

我是UI开发，JavaScript，ReactJS的新手，所以请原谅缺乏基础知识。

我正在尝试开发一个简单的ReactJS应用程序，该应用程序通过表单接受用户输入，发送到后端服务器并从服务器接收响应。后端服务器正在侦听WebSocket URL＆＃39; ws：// localhost：8025 / websockets / WSService＆＃39;。我在下面提供了代码片段。当我输入一些文字输入并点击＆＃39;提交＆＃39;服务器成功接收消息。我现在正在尝试接收服务器发送的响应，并且想知道在哪里设置＆＃39; onmessage＆＃39;功能

我已经审核了以下问题，但它们对我的要求略有不同，而且我无法将建议直接映射到我的解决方案：

以下提供的代码段：

import android.app.DatePickerDialog;
import android.icu.util.Calendar;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.DatePicker;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    DatePickerDialog datePickerDialog;
    EditText date;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        date = (EditText)findViewById(R.id.date);

        date.setOnClickListener(new View.OnClickListener(){


            @RequiresApi(api = Build.VERSION_CODES.N)
            @Override
            public void onClick(View v) {
                final Calendar c;
                c = Calendar.getInstance();
                int mYear = c.get(Calendar.YEAR);
                int mMonth = c.get(Calendar.MONTH); 
                int mDay = c.get(Calendar.DAY_OF_MONTH); 
                //Dialog DatePicker
                datePickerDialog = new DatePickerDialog(MainActivity.this, new
                DatePickerDialog.OnDateSetListener(){
                    @Override
                    public void onDateSet(DatePicker view,int year, int monthOfYear, int dayOfMonth){
                        date.setText(dayOfMonth + "/" +(monthOfYear + 1) + "/" + year);
                    }
                },mYear,mMonth,mDay);
                datePickerDialog.show();
            }
        });
    }
}

Answer 1

嗯，我能够找到解决方案，结果很简单。我所要做的就是在handleSubmit（）中定义onmessage。

  handleSubmit(event) {
    event.preventDefault();
    this.state.ws.send(this.state.value);
    this.state.ws.onmessage = (event) => {
      console.log(event.data);
    };
  }

现在我看到一条警告信息＆＃34;不要直接改变状态。使用setState（）react / no-direct-mutation-state＆＃34;，我无法弄清楚如何移动我的＆＃39; onmessage＆＃39;定义成一个setState（）。但我的原始要求已经满足，我想我现在可以忍受这个警告了！

使用WebSockets与服务器进行ReactJS通信

1 个答案: