json - 在组件之间传递数据：React JS

Question

大家好，我有一个简单的问题，我在 React JS 中有两个“组件”。首先是 App.js 和另一个 Botones.js。App.js 导入 Botones.js。在 App.js 中，我有一个“NavBar”、一个输入文本和一个用于登录的按钮。像这样：

明白我？伟大的！。在 Botones.js 中，我得到一个 JSON，这个 JSON 有一个描述和一个 URL，用于在我的电脑中获取声音。在botones.js 我有这样的功能：

Busqueda(){
var buscar = (document.getElementById("Buscar")).value; //Input text in App.js
if (buscar !==''){
   this.setState({
    Botones2 : ArrayBotones.filter(t=>t.descripcion.toLowerCase().indexOf(buscar.toLowerCase()) !== -1)
   });
 } else{
   this.setState({
      Botones2 : ArrayBotones
   });
 }}

好的？问题来了：当输入文本发生变化时，我需要将值发送到 Botones.js 以过滤我之前提到的 JSON。我怎样才能做到这一点？

我在 App.js 中尝试了这个，但不起作用：C

<input className="form-control" placeholder="Buscador" id="Buscar" onChange={this.Busqueda}/>

非常感谢您，并为失去的时间感到抱歉。

BOTONES.JS 的所有代码

    class Botones extends Component{

  constructor(){
    super();
    this.state = {
      ArrayBotones,
      Botones2 : ArrayBotones
    };
    this.Play = this.Play.bind(this);
    this.Busqueda = this.Busqueda.bind(this);
  }

  componentWillMount(){
    var user = firebase.auth().currentUser;
    if (user != null) {
        uid = user.uid;
    }

    const ReproName = firebase.database().ref().child('objeto').child('Repro');
    ReproName.on('value', (snapshot)=>{
      Reproduciendo = snapshot.val();
    });

    const UltimaReprodu = firebase.database().ref().child('objeto').child('UltimaRepro');
    UltimaReprodu.on('value', (snapshot)=>{
      Ultimo = snapshot.val();
    });

  }

  Play(index){
      var Clickeo = index.ubicacion;
      if (UltimoClick === Clickeo){
         Contador = Contador + 1;
         if (Contador === 3 ){
           alert('¿Tantas veces vas a clickar eso?');
           Contador = 0;
         }
      } else {
        Contador = 0;
        UltimoClick = index.ubicacion
      }
      const ReproName = firebase.database().ref('objeto');
      const Usuarios = firebase.database().ref('Usuarios');
      if (Reproduciendo===true){

          document.getElementById("Buscar").disabled = true;
          var aud = document.getElementById(index.ubicacion);
          aud.volume = 0;
          aud.play();
          aud.onplaying = function() {
          aud.disabled=true;
          Usuarios.set(
          {
            ID : uid
          }
          ).then(()=>{
          }).catch((error) => {
              console.log(error);
          });

          ReproName.set(
          {
            Repro : false,
            Ultimo: index.ubicacion,
            UltimaRepro:  new Date().toLocaleTimeString(),
            Token : uid
          }
          ).then(()=>{
          }).catch((error) => {
              console.log(error);
          });
          setTimeout(function() {
            ReproName.set(
            {
              Repro : true,
              Ultimo: index.ubicacion,
              UltimaRepro:  new Date().toLocaleTimeString(),
              Token :''
            }
            ).then(()=>{
              document.getElementById("Buscar").disabled = false;
              aud.disabled=false;
            }).catch((error) => {
                console.log(error);
            });
          }, CantidadTiempo );
        };
      }
  }

  Busqueda(){ // I need to send Here the Input of App.js
    var buscar = (document.getElementById("Buscar")).value;
    if (buscar !==''){
       this.setState({
        Botones2 : ArrayBotones.filter(t=>t.descripcion.toLowerCase().indexOf(buscar.toLowerCase()) !== -1)
       });
     } else{
       this.setState({
          Botones2 : ArrayBotones
       });
     }
  }


  render(){
    const ArrayBotones = this.state.Botones2.map((boton,index) =>{
       return(
           <div className="col-lg-2 col-sm-4 col-xs-6 contenedor-datos" key={index}>
            <img src={Boton} className="Boton" onClick={this.Play.bind(this,boton)} alt=''/>
            <div className="Nombre">
                {boton.descripcion}
            </div>
            <audio src={boton.ubicacion} id={boton.ubicacion} />
           </div>
       )
     });
      return(
        <div className="col-md-12">
            <div className="col-md-2 mt-2">

            </div>
            <hr/>
            <div className="row">
              { ArrayBotones }
            </div>
        </div>
      )

  }

}
export default Botones;

APP.JS 的所有代码

class App extends Component {
  constructor(){
    super();
    this.state = ({
      user : null
    });
  }

  componentWillMount(){
    firebase.auth().onAuthStateChanged(user=>{
      this.setState({user})
    });
  }

  handleAuth(){
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider)
    .then(result => console.log(`${result.user.email}`))
    .catch(error => console.log(`Error {error.code}: ${error.message}`))
  }

  handleLogOut(){
    firebase.auth().signOut()
    .then(result => console.log(`${result.user.email} ha iniciado sesion}`))
    .catch(error => console.log(`Error {error.code}: ${error.message}`))
  }



  RenderNavBar(){
    if (this.state.user !== null){
      return (
      <div>
        <nav className="navbar navbar-light bg-light barrita">
          <form className="form-inline">
            <input className="form-control" placeholder="Buscador" id="Buscar" onChange=''/> //THIS IS THE INPUT FILTER I NEED TO PASS TO OTHER BOTONES.js //
          </form>
          <button className="btn btn-primary ml-4 navbar-right" onClick={this.handleLogOut}>Cerrar sesion</button>
        </nav>      
      </div>
      );
    } else {
      return(
       <div>
        <nav className="navbar navbar-light bg-light barrita">
            <button className="btn btn-primary ml-4 navbar-right" onClick={this.handleAuth}>Inicia Sesion</button>
        </nav>      
      </div>
    );
    }
  }

  RenderBotones(){
    if (this.state.user !== null){
      return (
        <div>
           <Botones/> 
        </div>
      );
    }
  }
  render() {
    return (
      <div className="App">
        <div className="container-fluid">
            {this.RenderNavBar()}
          <div className="row form-elegant scrollbar-light-blue">
            <div className="col-sm-12">
               {this.RenderBotones()}
            </div>
          </div>
          </div>
      </div>
    );
  }
}

export default App;

JSON：

    {
  "ArrayBotones":[
    {
      "descripcion": "Impacto",
      "ubicacion" : "sonidos/impacto.mp3"
    },
    {
      "descripcion": "Soy Fede",
      "ubicacion" : "sonidos/holasoyfede.wav"
    },
    {
      "descripcion": "Wiu wiu",
      "ubicacion" : "sonidos/wiuwiu.wav"

    },
     {
      "descripcion": "Santiago querido",
      "ubicacion" : "sonidos/santiagoquerido.wav"

    },
    {
     "descripcion": "Tarado eh",
     "ubicacion" : "sonidos/taraoeh.mp3"

   },
   {
    "descripcion": "No hay porque",
    "ubicacion" : "sonidos/nohayporque.mp3"

  },
    {
     "descripcion": "Como anda Juan",
     "ubicacion" : "sonidos/comoandajuan.wav"

   },
    {
      "descripcion": "3 carajos",
      "ubicacion" : "sonidos/3carajos.wav"

    },
    {
      "descripcion": "Apurate Jose",
      "ubicacion" : "sonidos/apuratejose.wav"
    },
    {
      "descripcion": "No, no se",
      "ubicacion" : "sonidos/nonose.wav"
    },
    {
      "descripcion": "Pickle, aceituna",
      "ubicacion" : "sonidos/piclesaceitunas.wav"
    },
    {
      "descripcion": "Aca no pasa nada",
      "ubicacion" : "sonidos/Aca no pasa nada.mp3"
    },
    {
      "descripcion": "Cabron",
      "ubicacion" : "sonidos/Cabron.mp3"
    },
    {
      "descripcion": "Chanta",
      "ubicacion" : "sonidos/No es un chanta.mp3"
    },
    {
      "descripcion": "Te gusto eh",
      "ubicacion" : "sonidos/Te gusto eh.mp3"
    },
    {
      "descripcion": "Todo se pudrio",
      "ubicacion" : "sonidos/Todo se pudrio.mp3"
    },
    {
      "descripcion": "No se entiende",
      "ubicacion" : "sonidos/noseentiende.mp3"
    },
    {
      "descripcion": "Basta chicos",
      "ubicacion" : "sonidos/bastachicos.wav"
    },
    {
      "descripcion": "A tomar la leche",
      "ubicacion" : "sonidos/A tomar la leche.wav"
    },
    {
      "descripcion": "Ah",
      "ubicacion" : "sonidos/ah.wav"
    },
    {
      "descripcion": "Ah si",
      "ubicacion" : "sonidos/ahsivenaqui.wav"
    },
    {
      "descripcion": "Walter",
      "ubicacion" : "sonidos/algunwalter.wav"
    },
    {
      "descripcion": "A nadie le importa",
      "ubicacion" : "sonidos/anadieleimporta.wav"
    },
    {
      "descripcion": "Aplausos",
      "ubicacion" : "sonidos/aplausos.wav"
    },
    {
      "descripcion": "Atiendo boludos",
      "ubicacion" : "sonidos/atiendoboludos.wav"
    },
    {
      "descripcion": "Ay, por favor",
      "ubicacion" : "sonidos/ayporfavor.wav"
    },
    {
      "descripcion": "Callate idiota",
      "ubicacion" : "sonidos/callateidiota.wav"
    },
    {
      "descripcion": "Cambiame",
      "ubicacion" : "sonidos/cambiame.mp3"
    },
    {
      "descripcion": "Casi hacker",
      "ubicacion" : "sonidos/casihacker.mp3"
    },
    {
      "descripcion": "Clash",
      "ubicacion" : "sonidos/clash.wav"
    },
    {
      "descripcion": "Delicadisimo",
      "ubicacion" : "sonidos/delicadisimo.mp3"
    },
    {
      "descripcion": "Dindon",
      "ubicacion" : "sonidos/dindon.wav"
    },
    {
      "descripcion": "Eimaginate",
      "ubicacion" : "sonidos/eimaginate.wav"
    },
    {
      "descripcion": "Faso",
      "ubicacion" : "sonidos/Estahablandodefaso.wav"
    },
    {
      "descripcion": "Facundo",
      "ubicacion" : "sonidos/facundo.wav"
    },
    {
      "descripcion": "Feliz y enojado",
      "ubicacion" : "sonidos/felizyenojado.wav"
    },
    {
      "descripcion": "Hola, hola",
      "ubicacion" : "sonidos/holahola.wav"
    },
    {
      "descripcion": "Hola Nahuel",
      "ubicacion" : "sonidos/holanahuel.wav"
    },
    {
      "descripcion": "Hola salvaje",
      "ubicacion" : "sonidos/holasalvaje.wav"
    },
    {
      "descripcion": "jajajaja",
      "ubicacion" : "sonidos/jajajaja.mp3"
    },
    {
      "descripcion": "Jony",
      "ubicacion" : "sonidos/jony.wav"
    },
    {
      "descripcion": "Joseeee",
      "ubicacion" : "sonidos/joseeee.wav"
    },
    {
      "descripcion": "La Puertaaa",
      "ubicacion" : "sonidos/lapuerta.wav"
    },
    {
      "descripcion": "Marica",
      "ubicacion" : "sonidos/marica.wav"
    },
    {
      "descripcion": "Me parece a mi",
      "ubicacion" : "sonidos/mepareceami.wav"
    },
    {
      "descripcion": "Mucha Leche",
      "ubicacion" : "sonidos/muchaleche.wav"
    },
    {
      "descripcion": "Pa mono",
      "ubicacion" : "sonidos/pamono.mp3"
    },
    {
      "descripcion": "Ponganse a laburar",
      "ubicacion" : "sonidos/pongansealaburar.wav"
    },
    {
      "descripcion": "Ariel",
      "ubicacion" : "sonidos/porqueconariel.wav"
    },
    {
      "descripcion": "PPAP",
      "ubicacion" : "sonidos/ppap.wav"
    },
    {
      "descripcion": "Y puede haber mas",
      "ubicacion" : "sonidos/puedehabermas.wav"
    },
    {
      "descripcion": "Y que dios le re bendiga",
      "ubicacion" : "sonidos/quedioslerebendiga.wav"
    },
    {
      "descripcion": "Y que dios se apiade",
      "ubicacion" : "sonidos/quediosseapiade.wav"
    },
    {
      "descripcion": "Sigan chupando",
      "ubicacion" : "sonidos/quelasiganchupando.wav"
    },
    {
      "descripcion": "Ay quien grita",
      "ubicacion" : "sonidos/quiengrita.mp3"
    },
    {
      "descripcion": "Ricardo",
      "ubicacion" : "sonidos/ricardo.wav"
    },
    {
      "descripcion": "Ta re loco vo",
      "ubicacion" : "sonidos/Ta re loco vo.mp3"
    },
    {
      "descripcion": "Takata",
      "ubicacion" : "sonidos/Takata.mp3"
    },
    {
      "descripcion": "Tocame toda",
      "ubicacion" : "sonidos/tocametoda.wav"
    },
    {
      "descripcion": "Trabajamos",
      "ubicacion" : "sonidos/trabajamosynosdivertimos.wav"
    },
    {
      "descripcion": "Dorime",
      "ubicacion" : "sonidos/dorime.mp3"
    },
    {
      "descripcion": "Buitre",
      "ubicacion" : "sonidos/buitre.wav"
    }

  ]
}

标签： jsonreactjsfunctiontypescriptfilter

Answer 1

理想情况下，您不想进入 DOM 来读取输入值。您应该将输入值存储在 state in 中App.js并将其传递给Butones.js. 当您在 中收到新道具时Butones，getDerivedStateFromProps如果您正在使用 > React 16.3 或componentWillReceiveProps如果您正在使用 < React 16.3，您将使用过滤 JSON。

// in App.js
constructor() {
  this.state = { inputValue: '' };

  this.onInputChange =  this.onInputChange.bind(this);
}

onInputChange(e) {
  this.setState({ inputValue: e.target.value });
}

render() {
  const { inputValue } = this.state;
  return(
    <Navbar>
      <Botones filter={inputValue} />
      <input type='text' placeholder='Buscador' onChange={this.onInputChange} />
      <button>CERRAR SESION</button>
    </Navbar>
  );
}

// in Butones.js
static getDerivedStateFromProps(nextProps, prevState){
  if(nextProps.filter !== prevState.filter) {
    // return new state object with updated filter value and filtered butones
    return {
      filter: nextProps.filter,
      butones: // filter based on the new prop
    }
  }

  return null;
}