Question

我在其他组件中呈现以下表单组件两次。问题是，当我在其中一个渲染表单中输入值时，它不会更新另一个表单的占位符。如何在状态更改后对重新呈现组件做出反应，以便两个表单具有相同的占位符值？

这是一个小提琴：https://jsfiddle.net/o4h5af4g/7/

import React, { Component } from 'react';

class LengthForm extends Component {
  constructor(props){
    super(props)
    this.state = {
      length:1
    };
  }

 handleChange(event) {
   this.setState({length: event.target.value});
 }

 render() {
    return (
      <div className="LenghtForm">
        <input name="length" onChange={this.handleChange.bind(this)} type="integer" placeholder={this.state.length}/>
      </div>
    );
  }
}

export default LengthForm;

Answer 1

我认为您错过了使用您所在州的值初始化输入（输入值属性）。这应该触发重新渲染

wp_get_nav_menu_items

代码中的另一个缺陷是构造函数。你应该首先设置道具。

<input name="length" onChange={this.handleChange.bind(this)} 
   type="integer" placeholder={this.state.length}
   value={this.state.length} />

React组件不会在状态更改时重新呈现

1 个答案: