Question

我有一些文字。当您单击该元素时，会弹出一个模式，允许您编辑该文本。最简单的方法是在子节点上调用setState来初始化文本。

另一方面，虽然更尴尬，但是要创建一个初始文本属性并让孩子根据它设置它的文本。

直接在子节点上调用setState有什么问题，还是应该使用第二种方法？

Answer 1

虽然建议在反应dom中保持反应应用程序的数据“正常”（请参阅此处https://reactjs.org/docs/lifting-state-up.html），但我没有看到您提到的第一个方法有任何问题。

如果您必须存储非常特定于孩子的数据，我认为将该信息保存在孩子的状态中没有任何错误。

Answer 2

似乎你的模态不需要有自己的状态，在这种情况下你应该使用无状态的React组件。

这是以React方式在您的应用中传递数据的一种方式。

class ParentComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            initialText: "hello",
        }

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

    saveChildState(input) {
        console.log(input);
        // handle the input returned from child
    }

    render() {
        return (
            <div>
                <ChildComponent 
                    initialText={this.state.initialText} 
                    save={this.saveChildState} 
                />
            </div>
        );
    }
}

function ChildComponent(props) {
    return (
        <div>
            <input id="textInput" type="text" defaultValue={props.initialText}>
            </input>
            <button onClick={() => props.save(document.getElementById('textInput').value)}>
                Save
            </button>
        </div>
    )
}

Answer 3

也许我错误地解释了你的问题，但我认为保持模态文本在你的状态中始终准备是最有意义的。当您决定显示模态时，文本只能传递给模态。

class Test extends Component {
  constructor() {
    this.state = {
      modalText: 'default text',
      showModal: false
    }
  }
//Include some method to change the modal text
  showModal() {
    this.setState({showModal: true})
  }

  render(
    return (
      <div>
        <button onClick={() => this.showModal()}>
          Show Modal
        </button>
        { this.state.showModal ? <Modal text={this.state.modalText}/> : null }
      </div>
    )
  )
}

可以在React中的子组件上调用setState吗？

3 个答案: