小编ogk*_*ogk的帖子

我有一个包含所有这些元素的div:

<div id="container">
  <input type="text" />
  <div id="click"></div>
</div>

我想以某种方式设置样式,以便divwith id=click将位于input元素的右角.

我应用于文本的CSS是:

text-align: left;
width: 400px;

在我的clickdiv中我有:

width: 30px;
height: 30px;

基本上它看起来像这样:

[____INPUT___________________{DIV}]

我不知道如何设置div的样式以便将它放在输入元素上.现在它直接躺在它的右边.

我正在尝试学习React和Material UI.

我正在创建一个Web表单,到目前为止一切都很好,除非页面加载时,chrome自动用以前存储的数据填充文本字段,背景变为黄色.我该如何保持白色？

我知道在普通的CSS中我会包含这段代码:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

然而,考虑到这一点,我不一定有样式表,这就是一个问题.

我到目前为止:

const MyAwesomeReactComponent = React.createClass({
const containerStyle = 
    {
      /* input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
          } */
    };
 return (
      <div style={containerStyle}>
           <form action="/login" method="post" autocomplete ="off">
              <div>
                  <TextField hintText="Email Field" floatingLabelText="Email"  underlineFocusStyle={{borderColor: Colors.amber900}} />
              </div>
              <div>
                  <TextField hintText="Password Field" floatingLabelText="Password" type="password" />
              </div>
              <div>
                  <RaisedButton label="Submit" primary={true}/>
              </div>
          </form>
});
module.exports = MyAwesomeReactComponent;

我在解析input-webkit-autofill代码时遇到语法错误.

现在我有一个div基本上是一个巨大的正方形,在div里面我有另一个div,它只是文本,上面写着"上传文件"和隐藏的输入类型=文件元素.当用户按下div时,我想触发文件上传元素.到目前为止我提出的代码是:

<div id="test" onClick={this._handleClick}>
   <input type="file" name="image1" accept=".jpg,.jpeg,.png" id="img1" />
   <div id="uploadPhotoButtonText">
       +Add Photo 1
   </div>
</div>

所以我在CSS中设置的文件输入元素为display: none.一旦他们点击div id ="test"中的任何地方,我想触发点击文件上传元素.我怎么能做出反应呢？

我认为它会是这样的,但我不确定语法以及如何构建它:

_handleClick: function() {
  //trigger click into img1
}

如果我用 Material Ui 创建了一个日期选择器，如何获取用户的输入值？

假设用户选择 01.01.2016-> 我如何获取该值并将其存储为数据类型为日期的变量？

到目前为止，我尝试做的是使用状态来传回 JSON 对象，但这似乎不起作用。例如：

getInitialState: function() {
    return {
      startDate: null,
      endDate:null    
    };
  },

render: function() {
return (
      <div>
          <DatePicker hintText="Start Date" value={this.state.startDate}  onChange={this._handleStartInput} />
          <DatePicker hintText="End Date" value={this.state.endDate} onChange={this._handleEndInput} />
      </div>
);},

_handleStartInput: function(value) {
    this.setState({
      startDate: value
    });
  },

  _handleEndInput: function(value) {
    this.setState({
      endDate: value
    });
  },

然后从那里我可以创建另一个提取值的函数，但现在在我选择日期后，状态永远不会改变并显示在 UI 中。

我有一个包含子组件的父组件：

return(
  <ChildComponent state={this.getState} />
);

在 m 子组件中：

return(
  <Avatar src="./picture" />
);

我想根据父级的状态更改源。例如，如果父的状态是 1 i，则源将是图片 1，或者如果状态是 2，则源将是图片 2，如果状态是 3，它将是图片 3。我不确定语法是什么完成孩子的图像来源。会不会是这样的：

<Avatar src="'./picture' + this.props.state + '.jpg'"/>

编辑：只是想说明我正在使用一个名为 avatar 的材质 UI 组件。（将 img 更改为头像）文档：http : //www.material-ui.com/#/components/avatar

我有两个组成部分:

在我的父组件中,我有:

    //set focus object to false
    // include Child Component and React libraries
    const parent = React.createClass({
    getInitialState: function() {
      return {
        focus: false
      };
    },
      render() {
        return(
          <div>
            <Child focus={this.state.focus} />
            <a onClick={this._handleClick}>Click me</a>
          </div>
        );
      },

      _handleClick: function() {
        this.setState({focus: !this.state.focus});
      },
    };

在我的Child组件中,我有一个输入标签:

 const child = React.createClass({
      render() {
        return(
          <div>
            <input type="text" ref="input" />
          </div>
        );
      },

  componentWillReceiveProps: function() {
    this.refs.input.focus();
  },
};

总之,我在我的方法中尝试做的是通过更改prop调用componentWillReceiveProps来专注于输入标记.但是现在这不起作用.它最终只关注锚标签.我知道我做错了什么？

编辑:进一步详细说明我的问题是,一旦我点击锚标记,子组件中的输入元素就不会被关注.我怎样才能让它专注于？