如何调用反应材料中的方法-UI组件

Question

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

功能IVE使用

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和节点明确。并且返回的消息显示在反应组件上。 “线程”贾森包含所有收到的消息（线程内的密钥是消息，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))