问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于react的 linkState问题,求助

头像
hech
    7821117

    linkState图片描述

    需求是这样的，我点击ABox，给他append BBox CBox，其中要BBox和CBox里面的input数据流双向绑定，但是我这样写input根本输入不了文字，一直是默认文字

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>超级表单</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="react-with-addons.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="browser.min.js"></script>
    </head>
    <style>

    .addField {
border: 2px dashed #DDD;
text-align: center;
font-size: 30px;
cursor: pointer;
padding: 10px 0;

    }
    </style>
    <body>

    <div class="form" id="form">
 </div>
<script type="text/babel">
var _ABox;
var ABox=React.createClass({
    mixins: [ React.addons.LinkedStateMixin ],
    getInitialState:function(){
        _ABox=this;
        return {BBox:[],CBox:[],text:'默认文字'}
    },
    appendHtml:function(b,c){
        this.setState({
            BBox:b,
            CBox:c
        })
    },
    render:function(){
        return <div>
            <div className="addField" onClick={this.appendHtml.bind(null,<BBoxItem/>,<CBoxItem/>)}> +添加新字段</div>
            <BBox bItem={this.state.BBox}/>
            <CBox cItem={this.state.CBox}/>
        </div> 
    }
});
var BBox=React.createClass({
    render:function(){
        return <div className="BBox">{this.props.bItem}</div>
    }
});
var BBoxItem=React.createClass({
    render:function(){
        return <li ><input type="text" valueLink={_ABox.linkState('text')}/></li>
    }
});
var CBox=React.createClass({
    render:function(){
        return <div className="CBox">{this.props.cItem}</div>
    }
});
var CBoxItem=React.createClass({
    render:function(){
        return <li><input type="text" valueLink={_ABox.linkState('text')}/></li>
    }
});

ReactDOM.render(
    <ABox />,
    document.getElementById('form')
    )
</script>

    </body>
    </html>

    react
    阅读 3.9k
    1 个回答
    得票最新
    头像
    BetaRabbit
      1.4k17
      ✓ 已被采纳

      虽然没有用过linkState，但react中input如果指定了value，那用户输入的值是不会显示的，因为value已经被react控制了，如果要想用户能输入，必须添加一个onchange的handler，每次onchange的时候更新state或props，从而达到改变value的效果。

      [UPDATE]
      不知道理解的是否有偏差，总觉得这样的需求没必要双向绑定，只通过props就能够实现，请参考以下代码。
      B和C基本是一样的，偷了个懒，记得多点几下add。。。

      export default class A extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: 'default',
      B: [],
    };
  }

  handleChange = (e) => {
    this.setState({
      ...this.state,
      text: e.target.value,
    });
  };

  handleClick = () => {
    this.setState({
      ...this.state,
      B: [...this.state.B, <B />],
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>add</button>
        {this.state.B.map((item, i) => React.cloneElement(item, {
          key: i,
          value: this.state.text,
          onChange: this.handleChange,
        }))}
      </div>

    );
  }
}

function B(props) {
  return <input type="text" {...props} />;
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题