Question

我制作了一个变量，其样式具有希望单击输入框时将其更改为的样式。如何实现它，以便在单击输入框时考虑到CSS，样式和其他所有内容的导入，输入框的边框颜色变为蓝色？

    const inputStyle = css
      border-color: blue;
    ;      

    const InputBox = styled.input
      myClick: function () {
      inputstyle
      }
   ;

    render() {
    return (
        <InputBox
          placeholder='Click Me'
          type='text'
          onClick={this.myClick}
        />

Answer 1

styled.foo不返回类组件，因此编写方法就好像它们在模板字符串中的类上一样。

由于您要处理有状态的东西（是否已单击此东西？），因此需要有一些放置该状态的地方。然后，您可以将该状态传递给InputBox组件：

const InputBox = styled.input`
  border-color: ${({ clicked }) => clicked ? 'blue' : 'transparent'};
`

class Parent extends React.Component {
  constructor (props) {
    this.state = { clicked: false }
  }
  handleClick () {
    this.setState({ clicked: true })
  }
  render () {
    return (
      <InputBox
        placeholder="Click Me"
        type="text"
        clicked={this.state.clicked}
        onClick={this.handleClick}
      />
    )
  }
}

我建议您查看样式化组件文档的“通过的道具”部分。

Answer 2

您可以这样做：

const Styles = {
inputNormal:{color:'blue'},
inputClicked:{color:'red'}
}
class Parent extends React.Component {
constructor (props) {
this.state = { clicked: false }
}
handleClick () {
this.setState({ clicked: true })
}

render () {
  return (
    <InputBox
      placeholder="Click Me"
      type="text"
      style={this.state.clicked?styles.inputNormal:styles.inputClicked}
      onClick={this.handleClick}
    />
  )}}

Answer 3

您应该使用这样的变量添加样式：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked: false
    };
  }

  myClick = () => {
    this.setState({
      clicked: true
    });
  };

  render() {
    const inputStyle = {
      borderColor: "blue"
    };

    return (
      <input
        placeholder="Click Me"
        type="text"
        onClick={this.myClick}
        style={this.state.clicked ? inputStyle : null}
      />
    );
  }
}

这是一个工作示例：

DEMO

ReactJs更改CSS属性onclick

3 个答案: