React-Redux 未在输入/文本区域框中正确呈现数据

Question

我有下面的示例，其中 (1) 和 (2) 将显示“某些文本”的值而不是 Data.preview，但 (3) 将显示 Data.preview 值就好了。我知道案例 (1) - 基于这篇文章 (ReactJS component not rendering textarea with state variable) 不适用于 react 但为什么案例 (2) 返回“某些文本”（我也尝试过 value=）而不是 Data.preview像案例（3）一样的值。我不希望它成为占位符，因此它是可编辑的。谢谢

render(){
    const { Data } = this.props
    return (
         {Data.preview} {*/this would return the value correctly*/}
         (1) <textarea className="form-control" maxLength="50" rows="3">{ Data.preview || "Some Text" }</textarea>
         (2) <textarea className="form-control" maxLength="50" rows="3" defaultValue={ Data.preview || "Some Text"}></textarea> {*/or use value = {}, either would return "Some Text" */}             
         (3) <textarea className="form-control" placeholder={Data.preview || "Some Text"} maxLength="50" rows="3"></textarea>{*/ this would return Data.preview value */}             
    )
}

Answer 1

textarea 可以使用value 属性来显示其当前值，然后使用onChange 处理程序更新该值。

在这个示例中，我添加了一个还没有值的示例，以及一个具有默认值的示例。

一个重要的注意事项是一个值不能是null；它必须是未定义的或为空的。

这里的答案并不真正涉及redux，而是用于编辑值的组件状态。我希望这对使用它有足够的帮助，将其应用到您的代码中。

const { Component } = React;

class DataEntrySample extends Component {
  constructor( props ) {
    super();
    this.state = {
      data: props.value
    };
    this.updateData = this.updateData.bind(this);
  }
  updateData(e) {
    this.setState({ data: e.target.value });
    console.log('changed to :' + e.target.value );
  }
  render() {
    return (
      <textarea 
        value={this.state.data} 
        onChange={this.updateData} 
        placeholder={this.state.data || 'Enter your data'}>
      </textarea>
    );
  }
}

const target = document.querySelector('#container');
ReactDOM.render( <div><DataEntrySample /><DataEntrySample value="Some text" /></div>, target );

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<div id="container"></div>

如果你真的想通过defaultValue 来做，你也有机会这样做（只要你定义一个onChange 处理程序来更新某处的值）。

有一个警告，即它不会从它的视图之外更新任何更改，除非它可以定义它确实已经更改，并且使用defaultValue。所以下面的例子可以工作，从外面改变道具是行不通的。

const { Component } = React;

class DataEntrySample extends Component {
  constructor( props ) {
    super();
    this.state = {
      data: props.value
    };
    this.updateData = this.updateData.bind(this);
  }
  updateData(e) {
    this.setState({ data: e.target.value });
    console.log('changed to :' + e.target.value );
  }
  render() {
    return (
      <textarea 
        onChange={this.updateData} 
        defaultValue={this.state.data || 'Enter your data'}>
      </textarea>
    );
  }
}

class ParentEntry extends Component {
  constructor() {
    super();
    this.updateProps = this.updateProps.bind(this);
    this.state = {
      value: 'initial text'
    };
  }
  updateProps( value ) {
    this.setState({ value });
  }
  render() {
    const { value } = this.state;
    console.log( 'render' );
    return (
      <div>
        <h1>With default value</h1>
        <DataEntrySample value={value} />
        <br />
        <button onClick={()=>this.updateProps('empty text')} type="button">
          Will set text to empty text
        </button>
      </div>
    );
  }
}

const target = document.querySelector('#container');
ReactDOM.render( <ParentEntry />, target );

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<div id="container"></div>

Answer 2

你需要了解更多关于控制器组件https://reactjs.org/docs/forms.html

如果您决定确实需要不受控制的组件：https://reactjs.org/docs/uncontrolled-components.html