Question

我是Reacts的新手。我看了很多帖子，但找不到解决问题的方法。

任务： 这样，在每个<td>内都有一个“修改”按钮，通过点击该文章可以使用其中显示的<td>编辑此<input />的文字。

父：

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

class BehaviorTable extends Component {
    constructor(props){
        super(props);
        this.state = {
            users: [
                {name: 'Коля', age: 30},
                {name: 'Вася', age: 40}
            ],
            status: false
        }
    }
    handlerEdit = (key, value) => {
        if (isNaN(value)){
            this.state.users[key].name = value;
        }else{
            this.state.users[key].age = value;
        }
        this.setState({
            'users': this.state.users,
        });
    };
    render(){
        return(
            <table>
                <tbody>
                {this.state.users.map((item, index) => (
                    <tr key={index}>
                        <td>
                            {item.name}
                            <BehaviorInput
                                status={this.state.status}
                                value={item.name}
                                index={index}
                                editFn={this.handlerEdit}
                            />
                        </td>
                        <td>
                            {item.age}
                            <BehaviorInput
                                status={this.state.status}
                                value={item.age}
                                index={index}
                                editFn={this.handlerEdit}
                            />
                        </td>
                    </tr>
                ))}
                </tbody>
            </table>
        )
    }
}
export default BehaviorTable;

儿童：

import React, { Component } from 'react';
class BehaviorInput extends Component {
    constructor(props){
        super(props);
        this.state = {
            'status': this.props.status,
            'value': this.props.value
        }
    }
    callChangeName(event){
        this.setState({
            'value': event.target.value
        });
    }

    handlerChange(){
        this.setState({'status': !this.state.status});
    }
    render(){
        return(
            <p>
                {(this.state.status) ?
                    <input type="text"
                           value={this.state.value}
                           onChange={this.callChangeName.bind(this)}
                           onBlur={this.props.editFn.bind(null, this.props.index, this.state.value)}
                    />:
                    <button
                        onClick={this.handlerChange.bind(this)}
                    >Edit</button>
                }
            </p>
        )
    }
}

export default BehaviorInput;

我不明白如何从父组件中更改子组件中的状态？也许我认为错了。请给我一个关于我的问题的建议。

Answer 1

我最近遇到了类似的问题，我想根据父母点击按钮来改变孩子。单击的按钮位于父级的render方法中，同时还包含单击处理程序，子级道具将从父级状态传递给子级。这样孩子会自动更新，虽然它不是一个正在更新的状态，我不这么认为。我没有用过很长时间的反应 - 所以任何人都可以随意纠正我。我在这里有一个codepen来演示我的意思，点击一周中的任何一天更新详细视图。

https://codepen.io/Macpeters/pen/dJZoLM

父母有一周（数组）和一天。每天的任何一天都会被点击，更新日期。然后它将一天传递给详细信息组件

   <div>  
      <h1>7 Day Weather Forcast:</h1>
       {week.map(function(day, index){
          return <span key={ index }>
            <a href="#"
              onClick={(e) => handleClick(e, index)}
              ><Card day={day}/></a></span>;
       })}
      <div><DetailedCard day={week[details]}/></div>
    </div>

然后，细节组件引用其道具中的那一天

   <div>
    <h3>Detailed Forecast for {this.props.day.date} </h3>
    <span><img src={this.props.day.image} /> 
    High of {this.props.day.high}, Low of {this.props.day.low}</span>
    <p>{this.props.day.description}</p>
  </div>

Answer 2

我找到了解决问题的决定。在子组件中添加新功能在子组中改变状态并调用其他功能。

changeCall() {
        this.handlerChange();
        this.props.editFn(this.props.index, this.state.value, this.props.objectKey);
    }

如何从父母改变孩子的状态

2 个答案: