如何在文本区域内渲染漂亮的json数据React js？

我是新来的反应js.I在渲染内textarea.I漂亮的JSON数据不知道一个问题，一部分是错误的我希望我的prettyjson里面textarea的呈现就像这个如何在文本区域内渲染漂亮的json数据React js？

"email":"[email protected]", 
"email":"[email protected]", 
.....

这是我的代码但我得到什么我的文字区域内

/** 
* Created by arfo on 6/26/2016. 
*/ 
var React =require('react'); 
var api = require('../utils'); 


var Bulkmail = React.createClass({ 
    getInitialState:function() { 
     return{ 
      default:10, 
      data:[], 
      color:'#58FA58' 

     } 
    }, 
    componentDidMount:function() { 
     api.getemail(this.state.default).then(function (response) { 
      this.setState({ 
       data:response 

      }) 
     }.bind(this)) 
    }, 
    onSubmit:function (e) { 
     e.preventDefault(); 
     console.log(this.refs.text.value.trim()); 


    }, 

    onChange:function (e) { 
    e.preventDefault(); 
     //console.log(this.refs.text.value.trim()) 
     var data = this.refs.text.value.trim(); 
     if(isNaN(data)){ 
      this.setState({ 
       color:'#FE2E2E' 
      }) 
     }else{ 
      this.setState({ 
       color:'#58FA58' 
      }) 
     } 
    }, 
    render:function() { 
     console.log(this.state.data); 
     var results = this.state.data; 
     return(
      <div className="bodybox"> 
       <div className="box"> 
        <div className="upc"> 
         <p>Generate Bulk Email</p> 
         <form onSubmit={this.onSubmit}> 
         <input onChange={this.onChange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultValue={this.state.default} placeholder="Enter Number"/> 
         <button>Get Data</button> 
         </form> 
         <div className="result"> 
          <ul> 
           {this.state.data.map(function (data) { 
            return <li key={data.id}>{data.email}</li> 
           })} 

          </ul> 
         </div> 

        </div> 
        <div className="tdown"> 

         <p>Json Format</p> 

         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
         <textarea defaultValue={this.state.data.map(function(data) { 
          return JSON.stringify(data.email) 
         })} > 
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
         </textarea> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
}); 

module.exports = Bulkmail ;

来源

2016-06-28 vignesh waran

得到你需要将其他参数传递给函数字符串化JSON漂亮：'JSON.stringify（OBJ，不确定，4）;'看https://developer.mozilla.org/de/docs/ Web/JavaScript/Reference/Global_Objects/JSON/stringify –

@ mpf82 Noluck不工作 –

您应该将一个String传递给defaultValue。当使用map函数时，结果是一个Array。 –

<textarea value={this.state.data.map(e=>JSON.stringify(e))} defaultValue="val" />

结果{"email":"[email protected]"},{"email":"[email protected]"},{"email":"[email protected]"}

let value = this.state.data.map(e=>JSON.stringify(e).replace(/{|}/g,'')); 

<textarea value={value} defaultValue="val" />

结果"email" : "[email protected]", "email" : "[email protected]", "email" : "[email protected]"

let value = this.state.data.map(e=>JSON.stringify(e).replace(/{|}/g,'')).join(',\n'); 

<textarea value={value} defaultValue="val" />

结果"email" : "[email protected]", "email" : "[email protected]", "email" : "[email protected]"

在HTML中，的值被经由儿童设置。在React中，您应该使用值来代替。

来源

2016-06-28 12:45:02

/** 
* Created by arfo on 6/26/2016. 
*/ 
var React =require('react'); 
var api = require('../utils'); 


var Bulkmail = React.createClass({ 
    getInitialState:function() { 
     return{ 
      default:10, 
      data:[], 
      color:'#58FA58' 

     } 
    }, 
    componentDidMount:function() { 
     api.getemail(this.state.default).then(function (response) { 
      this.setState({ 
       data:response 

      }) 
     }.bind(this)) 
    }, 
    onSubmit:function (e) { 
     e.preventDefault(); 
     console.log(this.refs.text.value.trim()); 


    }, 

    onChange:function (e) { 
    e.preventDefault(); 
     //console.log(this.refs.text.value.trim()) 
     var data = this.refs.text.value.trim(); 
     if(isNaN(data)){ 
      this.setState({ 
       color:'#FE2E2E' 
      }) 
     }else{ 
      this.setState({ 
       color:'#58FA58' 
      }) 
     } 
    }, 

    getEmailValue:function(){ 
    return this.state.data.map(function(data) { 
          return JSON.stringify(data.email) 
         }).join('\n'); 
}, 
    render:function() { 
     console.log(this.state.data); 
     var results = this.state.data; 
     return(
      <div className="bodybox"> 
       <div className="box"> 
        <div className="upc"> 
         <p>Generate Bulk Email</p> 
         <form onSubmit={this.onSubmit}> 
         <input onChange={this.onChange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultValue={this.state.default} placeholder="Enter Number"/> 
         <button>Get Data</button> 
         </form> 
         <div className="result"> 
          <ul> 
           {this.state.data.map(function (data) { 
            return <li key={data.id}>{data.email}</li> 
           })} 

          </ul> 
         </div> 

        </div> 
        <div className="tdown"> 

         <p>Json Format</p> 


         <textarea value={getEmailValue()} 

         </textarea> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
});

来源

2016-06-28 13:08:39

如何在文本区域内渲染漂亮的json数据React js？

回答

相关问题