Soy nuevo en reaccionar js.Tengo un problema al procesar los datos bonitos de json dentro de textarea.No sé qué parte está mal Quiero que mi prettyjson renderice dentro de textarea Así

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

Este es mi código, pero no obtengo nada dentro de mi área de texto

/**
 * 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 ;
1
vignesh waran 28 jun. 2016 a las 15:27

3 respuestas

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

resultado {"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" />

resultado "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" />

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

En HTML, el valor de se establece a través de elementos secundarios. En React, deberías usar valor en su lugar.

1
Kokovin Vladislav 28 jun. 2016 a las 14:39

No es necesario usar expresiones regulares difíciles, podemos usar la funcionalidad de JSON.stringify (object, undefined, 2) para obtener cadenas bellamente renderizadas de 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;
0
Inovramadani 27 dic. 2018 a las 03:04
/**
 * 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>
        )
    }
});
0
Piyush.kapoor 28 jun. 2016 a las 13:08