如何在 React material-ui 组件中调用方法

Question

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

我使用的函数

 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>)
    })
  },

对于这次聊天，我使用的是 socketio 和 node express。并且返回的消息显示在反应组件上。 "threads" jason 包含所有收到的消息（线程内的键是 message,user1）。现在我想要的是在 secondaryText 中调用上面的测试函数并将 {item.message} 作为参数传递。但是当它运行时它说 "Uncaught ReferenceError: test is not defined"。

  <div>
      {

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

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

        })
      }
        </div>

整个反应组件

    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>
    );
  }

});

Answer 1

将您的 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))

如何在 React material-ui 组件中调用方法

How to call a method inside a react material-ui components

javascript

reactjs

material-ui