輸入按鈕不輸入新行在輸出框Reactjs

我寫了一個代碼，其中輸入框中所做的每個更改都反映在輸出框中，並且正常工作但問題是當我按Enter鍵以在輸出框中轉到新行時除非行長結束，否則不會進入新行。輸入按鈕不輸入新行在輸出框Reactjs

var App =React.createClass({ 
 
    getInitialState:function(){ 
 
     return{ 
 
      value:"My Value" 
 
     } 
 
    }, 
 
    updateValue:function(modifiedValue){ 
 
     this.setState({ 
 
      value:modifiedValue 
 
     }) 
 
    }, 
 
    render:function(){ 
 
     return(
 
      <div className="inputBox container-fluid"> 
 
       <h1 className="text-center text-primary">Hello Coders !!!</h1> 
 
       <div className="row"> 
 
        <div className="col-md-6 col-md-offset-1"><InputBox value={this.state.value} updateValue={this.updateValue}/></div> 
 
        <div className="outputBox col-md-6 col-md-offset-1">{this.state.value}</div> 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 
var InputBox =React.createClass({ 
 
    update:function(){ 
 
     // var modifiedValue=ReactDOM.findDOMNode(this.refs.initialValue).value; 
 
     var modifiedValue=this.refs.initialValue.value; 
 
     // var modifiedValue= e.target.value 
 
     this.props.updateValue(modifiedValue); 
 
    }, 
 
    render:function(){ 
 
     return(
 
     <textarea type="text" value={this.props.value} onChange={this.update} ref="initialValue"> 
 
         </textarea> 
 

 
     ); 
 
    } 
 
}); 
 
ReactDOM.render(<App />, 
 
document.querySelector("#app") 
 
);

<!DOCTYPE html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>React Tutorial</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <style> 
 
     .outputBox,textarea{ 
 
      width: 400px; 
 
      border: 5px solid gray; 
 
      margin: 0; 
 
      height: 500px; 
 
     } 
 

 
    </style> 
 
</head> 
 
<div id="app"></div> 
 
<script src="demo.js" type="text/babel"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 
 
</body> 
 
</html>

來源

2016-02-29 user5323957

，你可以嘗試使用'dangerouslySetInnerHTML'這樣https://jsfiddle.net/69z2wepo/32970/，因爲在'textarea'進入有符號'\ n'，但對於html，您必須使用'
' –

它的工作謝謝 – user5323957

所指示@Alexander而不是使用像

<div className="outputBox col-md-6 col-md-offset-1">{this.state.value}</div>

新增

dangerouslySetInnerHTML={ this.format(this.state.value) } />

而且

format: function (value) { 
 
    \t return { __html: value.replace(/\r?\n/g, '<br>') }; 
 
    }, 
 
And It Worked

來源

2016-02-29 08:31:38 user5323957

輸入按鈕不輸入新行在輸出框Reactjs

回答

相關問題