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

How to render Pretty json data inside text area React js?

本文关键字：漂亮 json 数据 文本 区域      更新时间：2023-09-26

我是react js的新手。我有一个问题，在文本区域内渲染漂亮的json数据。我不知道哪部分错了我想让我的prettyjson在textarea内呈现像这样

"email":"xxxx@x.com",
"email":"yyyy@y.com",
.....

这是我的代码但是在我的textarea

里面我一无所获
/**
 * 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 ;

不需要使用困难的正则表达式，我们可以使用JSON的功能。stringify(object, undefined, 2)从JSON中获得漂亮的字符串。

var obj={"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}

var pretty = JSON.stringify(obj, undefined, 2);
var ugly = document.getElementById('myTextArea').value; document.getElementById('myTextArea').value = pretty;

更新

当然你应该使用JSON.stringify:

JSON.stringify(your_object, undefined, desired_indentation)

老答:

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

result {"email":"some@mail"},{"email":"some@mail"},{"email":"some@mail"} 

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

result "email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail" 

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

result "email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail"

在HTML中，值是通过子元素设置的。在React中，你应该使用value 

/**
 * 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>
        )
    }
});
相关文章：