Wie ein Wert an andere Komponente in React übergeben werden

Question

Ich habe ein Projekt, das Filme hinzufügen, bearbeiten oder aus einer Liste löschen kann. Ich habe Probleme mit dem Edit-Teil der Komponente, neben jedem Film habe ich eine Texteingabe hinzugefügt, um diesen Film zu bearbeiten, falls gewünscht, aber ich weiß nicht, wie ich diesen Wert an die andere Komponente weitergeben soll, um die alte zu ändern Wert für den Neuen. Hier ist, was ich jetzt habe: Film Komponente:

import React, {Component} from 'react'; 


class Movie extends Component{ 
    constructor(props){ 
     super(props); 
     this.state= { 
      inputValue: '' 
     }; 
    } 
    updateInputValue(evt) { 
     this.setState({ 
      inputValue: evt.target.value 
     }); 
    } 

    render(){ 
     return(
      <div> 
       {this.props.text} 
       <button onClick={this.props.deleteMethod}>X</button> 
       <input value={this.props.newMovieName} 
        onChange={evt => this.updateInputValue(evt)} 
       /> 
       <button onClick={this.props.editMethod().bind(this.inputValue)}>edit</button> 


      </div> 
     ); 
    } 
} 

export default Movie; 

Add-Komponente:

import React,{Component} from 'react'; 
import Movie from './Movie.jsx'; 


class AddComponent extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      movieText: '', 
      movies: [], 
     }; 
    } 

updateMovieText(movieText){ 
    this.setState({movieText: movieText.target.value}) 
} 

addMovie(){ 
    if(this.state.movieText === ''){return} 

    let moviesArr = this.state.movies; 
    moviesArr.push(this.state.movieText); 
    this.setState({movieText: ''}) 
    this.textInput.focus(); 
} 

handleKeyPress = (event) => {//enables to add when pressing enter on keyboard 
    if(event.key === 'Enter'){ 
    let moviesArr = this.state.movies; 
    moviesArr.push(this.state.movieText); 
    this.setState({movieText: ''}) 
    } 
} 

deleteMovie(index) { 
    let movieArr = this.state.movies; 
    movieArr.splice(index,1);//remove the movie from array 
    this.setState({movies: movieArr}) 
} 

editMovie(index,value){ 
    let moviesArr = this.state.movies; 
    moviesArr[index] = value; 
    this.setState({movies:movieArr}); 
} 

    render(){ 
     let movie = this.state.movies.map((val,key)=> {//prints on screen list of movies see line55 
      return (<Movie 
      key={key} 
      text={val} 
      deleteMethod={() => this.deleteMovie(key)} 
      editMethod={() => this.editMovie(key,this.inputValue)} 
      /> 

      ); 

     }); 

     return (
      <div> 
       <input type="text" 
        ref={((input)=>{this.textInput = input;})} 
        className="textInput" 
        value={this.state.movieText} 
        onChange={movieText => this.updateMovieText(movieText)} 
        onKeyPress={this.handleKeyPress.bind(this)} 
        /> 
       <button onClick={this.addMovie.bind(this)}>Add</button> 
       {movie} 

       </div> 

     ); 
    } 
} 

export default AddComponent; 

Ich glaube, ich binden verwenden sollte, aber jetzt ist es nicht funktioniert

Answer 1

Sie benötigen um den Schlüssel in AddComponent zu binden, damit Sie den bearbeiteten Film identifizieren können, z

let movie = this.state.movies.map((val,key)=> { 
      return (<Movie 
      key={key} 
      text={val} 
      deleteMethod={() => this.deleteMovie(key)} 
      editMethod={this.editMovie.bind(this, key)} 
      /> 

      ); 

Dann in der Movie Komponente benötigen Sie den aktuellen Eingabewert auf Klick weitergeben, zum Beispiel

<button onClick={() => this.props.editMethod(this.state.inputValue)}>edit</button>