道具未更新

Question

我是 React 的新用户，我尝试通过容器组件和道具将修改从我的 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}

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

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

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'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>