Javascript 如何在react material ui组件中调用方法

我正在实现一个聊天系统，它具有添加表情符号的功能。为此，我创建了一个函数，它返回一个组件以及文本和图像

我使用的功能

 test: function(item1) {
    var texts = item1.message.split(/:\)/g);
    console.log(texts);
    var content = [];
    for(var i = 0; i < texts.length - 1; i++) {
        content.push(texts[i]);
      content.push(<img src={Emojis[0].uri}/>);
    }
    return content.map(function(emoji) {
      return (<span> {emoji} </span>)
    })
  },

测试：功能（第1项）{
var text=item1.message.split（/：\）/g）；
控制台日志（文本）；
var内容=[]；
对于（变量i=0；i

对于这次聊天，我使用的是socketio和node express。返回的消息显示在react组件上。“threads”jason包含所有接收到的消息（线程中的键是message，user1）。现在我想在secondaryText中调用上面的测试函数，并将{item.message}作为参数传递。但当它运行时，它会说“未捕获引用错误：未定义测试”

{
this.state.threads.map（函数（项）{
返回(
);
})
}

整个反应组分

    const Threads = React.createClass({

  getInitialState: function() {
    return {
        threads: ThreadStore.getmessages()
    }
  },

  userlistio:function(){
      console.log(" awooooo");
    socket.on('chatList',function(data){
        console.log(data.Userlist+" awa!");
    }.bind(this));
 },

    componentDidMount: function () {
        ThreadStore.addChangeListener(this._onChange);

    },
    _onChange: function () {
        this.setState({
            threads: ThreadStore.getmessages()
        });

    },
  socketio: function() {

    socket.on('chat', function (data) {
      console.log(data.message);
        console.log(data.user2);
      this.setState({threads: data.message});
    }.bind(this));
  },
  _sendmessage: function() {
      let message = this.refs.message2.value;
      let User2 = this.refs.message1.value;
      let Eml = LoginStore.getEmail();
    let chat = {
        message: message,
        user1: User1,
        user2: User2,
        emailusr1: Eml
    }
    console.log('Emiting ...');
    socket.emit('message', chat);
    console.log('Done ...');

  },
  test: function(item1) {
    var item = {
        message: ':) hello :) hello :) hello :)'
    }
    console.log("smilies working");
    var texts = item1.message.split(/:\)/g);
    console.log(texts);
    var content = [];
    for(var i = 0; i < texts.length - 1; i++) {
        content.push(texts[i]);
      content.push(<img src={Emojis[0].uri}/>);
    }
    return content.map(function(emoji) {
      return (<span> {emoji} </span>)
    })
  },
  render: function() {
    return (
      <Paper zDepth={1} style={Sty1}>
        {this.userlistio()}
        {this.socketio()}
        <CardTitle title="Threads" subtitle="" />
        <CardText>
          Message threads
            <div>
          {

            this.state.threads.map(function(item) {

                return (<ListItem
                    leftAvatar={<Avatar src="profile pic" />}
                    primaryText={item.user1}
                    secondaryText={test({item})}
                    secondaryTextLines={2}
                />
                );

            })
          }
            </div>
            <Paper style={Sty2} >
                <input type="text" ref="message1" />
                <input type="text" ref="message2" />
          <input type="button" onClick={this._sendmessage} value="Send message" />
            </Paper>



        </CardText>
        <CardActions>

        </CardActions>
        </Paper>
    );
  }

});

const Threads=React.createClass({
getInitialState:函数（）{
返回{
线程：ThreadStore.getmessages（）
}
},
userlistio:function（）{
控制台日志（“awoooo”）；
socket.on（'chatList'，函数（数据）{
log（data.Userlist+“awa！”）；
}.约束（这个）；
},
componentDidMount:函数（）{
ThreadStore.addChangeListener（this.\u onChange）；
},
_onChange:function（）{
这是我的国家({
线程：ThreadStore.getmessages（）
});
},
socketio:function（）{
socket.on（'chat'，函数（数据）{
console.log（data.message）；
console.log（data.user2）；
this.setState（{threads:data.message}）；
}.约束（这个）；
},
_sendmessage:function（）{
让message=this.refs.message2.value；
让User2=this.refs.message1.value；
让Eml=LoginStore.getEmail（）；
让我们聊天={
讯息:讯息,，
user1:user1，
user2:user2，
emailusr1:Eml
}
log（'emit…'）；
socket.emit（'message'，chat）；
console.log（'Done…'）；
},
测试：功能（第1项）{
变量项={
留言：'）：）你好：）你好：）你好：）'
}
控制台日志（“微笑工作”）；
var text=item1.message.split（/：\）/g）；
控制台日志（文本）；
var内容=[]；
对于（变量i=0；i

将this.state.threads.map更改为：

    //es6
    this.state.threads.map(item => { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    })

    //es5
    this.state.threads.map(function(item) { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    }.bind(this))

//es6
this.state.threads.map（item=>{//使用es6中的箭头函数实现此绑定/可读性
返回(
);
})
//es5
this.state.threads.map（函数（项）{//使用es6中的箭头函数实现此绑定/可读性
返回(
);
}.绑定（本）

将this.state.threads.map更改为：

    //es6
    this.state.threads.map(item => { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    })

    //es5
    this.state.threads.map(function(item) { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    }.bind(this))

//es6
this.state.threads.map（item=>{//使用es6中的箭头函数实现此绑定/可读性
返回(
);
})
//es5
this.state.threads.map（函数（项）{//使用es6中的箭头函数实现此绑定/可读性
返回(
);
}.绑定（本）

此错误与material ui组件无关，相反，无论从哪个函数调用test，test都未定义。您可以发布此代码段所在的完整组件吗？而且，一旦您正确执行引用测试，您将遇到一个问题，即您传递的参数。现在，测试需要一个具有消息属性的对象—相反，您正在传递它（从您拥有的组件代码段）一个{item:item}的对象。test是组件上的一个属性—您需要用这个调用它。test@gabdallah我添加了code@gabdallah我现在这么做了，上面写着未捕获的TypeError:无法读取未定义的属性“test”“此错误与material ui组件无关，相反，无论从哪个函数调用test，test都是未定义的。您可以发布此代码段所在的完整组件吗？而且，一旦您正确执行引用测试，您将遇到一个问题，即您传递的参数。现在，测试需要一个具有消息属性的对象—相反，您正在传递它（从您拥有的组件代码段）一个{item:item}的对象。test是组件上的一个属性—您需要用这个调用它。test@gabdallah我添加了code@gabdallah我现在这么做了，上面写着“未捕获的TypeError:无法读取未定义的属性'test'”