Javascript 如何编辑React组件并更改屏幕上显示的文本

我有一个添加/删除/编辑组件和一个电影组件。我想在Add中编辑一个电影组件，然后在显示旧数据的地方显示新数据

这是我的添加/编辑/删除组件 从“React”导入React，{Component}

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) {
    const movies = this.state.movies;
    const newMovies = [
        ...movies.slice(0, index),
        ...movies.slice(index + 1)
    ];
    this.setState({
        movies: newMovies
    });
    // Notice movies !== new Movies
    // and movies still contains all the previous values
}


editMovie(index,value){
    const movies = this.state.movies;
    const newMovies = movies.map((movie, i) => {//HERE is EDIT
        if (i !== index) {
            return movie;
        }
        return value;
    });
    this.setState({ movies: newMovies });
    // Notice movies !== new Movies
    // and movies still contains the previous values
}

    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.bind(this, key)}
             />

            );

        });

        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;

从“/Movie.jsx”导入电影；
类AddComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影文本：''，
电影：[]，
};
}
updateMovieText（电影文本）{
this.setState（{movieText:movieText.target.value}）
}
addMovie（）{
如果（this.state.movieText==''{return}
让moviesArr=this.state.movies；
moviesArr.push（this.state.movieText）；
this.setState（{movieText:'}）
this.textInput.focus（）；
}
handleKeyPress=（事件）=>{//在键盘上按enter键时启用添加
如果（event.key=='Enter'）{
让moviesArr=this.state.movies；
moviesArr.push（this.state.movieText）；
this.setState（{movieText:'}）
}
}
删除电影（索引）{
const movies=this.state.movies；
const newMovies=[
…电影。切片（0，索引），
…电影.切片（索引+1）
];
这是我的国家({
电影：新电影
});
//注意电影！==新电影
//电影仍然包含前面的所有值
}
editMovie（索引、值）{
const movies=this.state.movies；
const newMovies=movies.map（（movie，i）=>{//这里是编辑
如果（i！==索引）{
回归电影；
}
返回值；
});
this.setState（{movies:newMovies}）；
//注意电影！==新电影
//电影仍然包含前面的值
}
render（）{
让movie=this.state.movies.map（（val，key）=>{//在屏幕上打印电影列表请参见第55行
返回（this.deleteMovie（key）}
editMethod={this.editMovie.bind（this，key）}
/>
);
});
返回(
{this.textInput=input；}}
className=“textInput”
值={this.state.movieText}
onChange={movieText=>this.updateMovieText（movieText）}
onKeyPress={this.handleKeyPress.bind（this）}
/>
添加
{电影}
);
}
}
导出默认组件；

这是我的电影组件

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(this.inputValue)}>edit</button>


            </div>
        );
    }
}

export default Movie;

import React，{Component}来自'React'；
类电影扩展组件{
建造师（道具）{
超级（道具）；
此。状态={
输入值：“”
};
}
更新输入值（evt）{
这是我的国家({
输入值：evt.target.value
});
}
render（）{
返回(
{this.props.text}
X
this.updateInputValue（evt）}
/> 
this.props.editMethod（this.inputValue）}>edit
);
}
}
导出默认电影；

---

上面的代码this.props.text消失，只剩下删除按钮、编辑文本输入和编辑按钮。如果我使用console.log，编辑函数返回的值将打印“未定义”

我猜您希望使用

this.state.inputValue

而不是

this.inputValue
我猜您希望使用
this.state.inputValue
而不是
this.inputValue
您只需要将状态传递给编辑方法：

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


this.props.editMethod（this.state.inputValue）}>edit
只需将状态传递给编辑方法：

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


this.props.editMethod（this.state.inputValue）}>edit