Question

我是React的新用户，我尝试通过容器组件和props从我的redux商店向我的组件发送修改。我的问题是最后，数据没有更新。我测试过，我发现在 Board 组件中，我得到了正确的编辑状态（我在this.state.mlodules [1] .name中编辑了一个模块的名称），但是这个值未在 Bloc 组件中发送。这是我的 Board 组件的渲染功能：

render() {
    const modules = this.state.modules.map((module) => (
        <Draggable key={module._id} x={module.position.x} y={module.position.y} inside={this.state.inside}>
            <Bloc module={module} editModule={this.props.onModuleEdited(module._id)}/>
        </Draggable>
    ));

    return (
        <div className="board"
             onMouseLeave={this.mouseLeave}
             onMouseEnter={this.mouseEnter}>
            {modules}
        </div>
    );
}

这是我的 Bloc 组件的渲染功能（我使用BlueprintJS可编辑文本）：

render() {
    return (
        <div className="pt-card pt-elevation-3 bloc">
            <span onMouseDown={this.preventDrag}>
                <EditableText
                    className="name"
                    defaultValue={this.props.module.name}
                    onChange={this.nameChanged}
                />
            </span>
        </div>
    );
}

有什么想法吗？谢谢！

Answer 1

正如我在评论中提到的那样，您分配的是defaultValue而未分配value道具。根据他们的source code on line #77，您可以看到value道具。

修改：正如您在文档中看到的那样，defaultValue是不受控制的输入，其中value是受控输入的字母

Answer 2

我认为，问题是defaultText。 defaultText仅在初始渲染时分配默认文本，不会更新值。因此，而不是将props值赋给value属性。

像这样：

value = {this.props.module.name}

注意：但如果您不更新props值（父组件的状态），它将使字段只读 {1}}方法。

检查此示例，当您单击文本“Click Me”时，它将更新状态值，但输入字段的文本不会更改：

onChange

class App extends React.Component{
   constructor(){
      super();
      this.state = {a:'hello'}
   }
   
   click(){
      this.setState({a: 'world'},() => {
         console.log('updated value: ', this.state.a)
      })
   }
   
   render(){
      return(
         <div>
            <Child value={this.state.a}/>
            <p onClick={() => this.click()}>Click Me</p>
         </div>
      )
   }
}

class Child extends React.Component{
   render(){
      console.log('this.props.value', this.props.value)
      return(
         <input defaultValue={this.props.value}/>
      )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'))

道具未更新

2 个答案: