反应中的数据绑定

嗨，我是新来做出反应，并且我无法理解数据绑定如何在reactjs中工作。我在AngularJS中完成了数据绑定，但在reactjs中它似乎更复杂。反应中的数据绑定

我想要做的是当我在输入字段中键入一些文本时，它应该实时显示在另一个地方。

这是我输入

<div className="post_input"> 

    <input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/> 

</div>

所以，当我在此输入字段中键入一些它应该出现在那里的一些我else.How能做到这一点？

来源

2017-02-14 CraZyDroiD

这部分内容很模糊'''它应该在另一个地方实时显示'''。你想让它出现在哪里？ – FreedomPride

@FreedomPride在同一页 – CraZyDroiD

React中的数据绑定可以通过使用controlled input来实现。通过将该值绑定到state variable和onChange事件来实现受控输入，以随着输入值更改而改变状态。

参见下面的代码片段

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = {value : ''} 
 
    } 
 
    handleChange = (e) =>{ 
 
    this.setState({value: e.target.value}); 
 
    } 
 
    render() { 
 
    return (
 
    <div> 
 
     <input type="text" value={this.state.value} onChange={this.handleChange}/> 
 
     <div>{this.state.value}</div> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

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

来源

2017-02-14 04:12:38

谢谢你我需要的东西 – CraZyDroiD

很高兴能有所帮助。你能接受这个答案吗？ –

简而言之，在React中，没有双向数据绑定。

所以，当你想要实现的功能，尝试定义state，并且这样写，听事件，更新状态，并作出反应呈现给你：

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    } 

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

    render() { 
    return (
     <input type="text" value={this.state.value} onChange={this.handleChange} /> 
    ); 
    } 
}

详情这里https://facebook.github.io/react/docs/forms.html

实际上有人希望用双向绑定书写，但React不以这种方式工作。如果你想写出这样的，你必须使用一个附加的反应，就像这样：这里https://facebook.github.io/react/docs/two-way-binding-helpers.html

对于refs

var WithLink = React.createClass({ 
    mixins: [LinkedStateMixin], 
    getInitialState: function() { 
    return {message: 'Hello!'}; 
    }, 
    render: function() { 
    return <input type="text" valueLink={this.linkState('message')} />; 
    } 
});

详细信息，它只是一个解决方案，使开发人员能够到达DOM中组件的方法，请参见https://facebook.github.io/react/docs/refs-and-the-dom.html

来源

2017-02-14 04:05:36 jiyinyiyong

所以我怎样才能在我的新文本字段中显示更新的值？ – CraZyDroiD

@CraZyDroiD说你的文本字段是''，只需使用' {this.state.value}'。 React基于'this.state'呈现它，并在'{}'里面这是一个JavaScript表达式。 – jiyinyiyong

Downvoted。你的第一句话会变得居高临下，并且从重要的东西 - 答案中分散出来。 – Yoshiyahu

绑定到你的状态的控制，你需要调用从控件的事件处理程序更新状态的组件上的功能。

而不是对所有的表单字段的更新功能，你可以使用ES6计算的名称功能创建一个通用的更新功能，并通过它从这样的控制需要内嵌值：

class LovelyForm extends React.Component { 
 
    constructor(props) { 
 
    alert("Construct"); 
 
    super(props); 
 
    this.state = { 
 
     field1: "Default 1", 
 
     field2: "Default 2" 
 
    }; 
 
    } 
 

 
    update = (name, e) => { 
 
    this.setState({ [name]: e.target.value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <form> 
 
     <p><input type="text" value={this.state.field1} onChange={(e) => this.update("field1", e)} /> 
 
      {this.state.field1}</p> 
 
     <p><input type="text" value={this.state.field2} onChange={(e) => this.update("field2", e)} /> 
 
      {this.state.field2}</p> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<LovelyForm/>, document.getElementById('example'));

<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="example"></div>

来源

2018-01-03 13:07:21

反应中的数据绑定

回答

相关问题