Question

下面有一个示例，其中（1）和（2）将显示“ Some Text”的值而不是Data.preview，但是（3）将显示Data.preview的值就可以了。我了解情况（1）-根据本文（ReactJS component not rendering textarea with state variable）不适用于react，但是为什么情况（2）返回“ Some Text”（我也尝试过value= ），而不是情况（3）的Data.preview值。我不希望它成为占位符，因此它是可编辑的。谢谢

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；必须为undefined或为空。

这里的答案实际上并不涉及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

React-Redux无法在输入/文本框内正确渲染数据

2 个答案: