如何在反应材料 ui 组件中调用方法

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

本文关键字：组件 调用 方法 ui 材料      更新时间：2023-09-26

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

我使用的功能

 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。 返回的消息显示在 React 组件上。 "线程"Jason 包含所有收到的消息（线程内的键是消息，User1）。 现在我想要的是在 secondaryText 中调用上述测试函数并将 {item.message} 作为参数传递。 但是当它运行时，它会说"未捕获的引用错误： 测试未定义"。

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

将 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))
相关文章：