在 React 中使用 button-onClick 事件而不是 input-onChange 事件来改变状态答案

【问题标题】：Utilise button-onClick event instead of input-onChange event to change state in React在 React 中使用 button-onClick 事件而不是 input-onChange 事件来改变状态
【发布时间】：2021-08-01 14:16:27
【问题描述】：

我目前正在尝试使用 React，我正在尝试根据用户输入的内容更改 div 的背景颜色。除了 App 组件之外，我已经创建了一个带有按钮的输入元素的输入组件，但是我无法在没有我预期的 onChange 事件的情况下输入输入元素。我不确定如何通过单击按钮而不是 onChange 事件来更改状态变量（App.js 中的“颜色”）的状态。

我的 App.js

const AppDiv = styled.div 
`margin: 0;
box-sizing: border-box;
display: flex;
width: 100%;
`

class App extends Component {

  state = {
    color: ' ',
    name: null
  }

  colorchange = (event) => {
    event.preventDefault();
    this.setState({
      color: event.target.value
    })
  }
  
  render(){
    return (
      <AppDiv>
        <Input
        name = {this.state.name}
        colour = {this.state.color}
        colourChange = {this.colorchange}
        Changecolour = {this.changecolour}
        /> 
      </AppDiv>
    )
  }
}

Input.js

const ColorButton = styled.button
` 
  width: 100px;
  height: 50px;
  border-radius: 24px/50%;
  background-color: green;
  margin: 10px;
`

const ColorDiv = styled.div
`
height: 100vh;
flex-basis: 300px;
background-color: ${props => props.colour};   //Changing background with 'colour' prop 
`

const input = (props) => {

    return (
        <ColorDiv>
            <h2>What is your name</h2>
            <input type = "text" value = {props.name}/>
            <h2>Choose your colour</h2>
            <input type = "text" value = {props.colour} />
            <ColorButton onClick = {props.colourChange}> Change Colour </ColorButton>
        </ColorDiv>
    )
}

我正在使用 styled-components 来应用样式。任何建议或帮助将不胜感激。谢谢

【问题讨论】：

标签： html reactjs forms

【解决方案1】：

实现您正在做的事情的最佳方法是拥有 2 个状态。一种用于您在<input /> 中输入的文本，另一种用于您想要的背景颜色。

在应用中

 state = {
    colorText: null,
    backgroundColor: null,
  }

onTextChange = (e) => {
    this.setState({
      colorText: event.target.value
    })
}

onUpdateBackgroundColor = () => {
   this.setState({
     backgroundColor: this.state.colorText
   })
}

.......
 <Input
        colour = {this.state.colorText}
        backgroundColor={this.state.backgroundColor}
        onTextChange = {this.onTextChange}
        updateBackgroundColor = {this.onUpdateBackgroundColor}
  />

然后在 Input.tsx 中

background-color: ${props => props.backgroundColor};

<input type="text" value={props.colour} onChange={props.onTextChange} />
<ColorButton onClick={props.updateBackgroundColor}> Change Colour </ColorButton>

注意：为了更好地做到这一点，您应该将状态移动到 Input 中，因为将状态保留在父组件中并在每次输入更改时更新它会导致大量渲染

【讨论】：

【解决方案2】：

您可以使用 ref 为您输入而不是对其进行控制

export default function App() {
  const [color, setColor] = React.useState("");
  const inputRef = React.useRef();
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input ref={inputRef} />
      <button
        onClick={() => {
          setColor(inputRef.current.value);
        }}
      >
        Update Color
      </button>
    </div>
  );
}

或为您的输入设置单独的状态：

export default function App() {
  const [color, setColor] = React.useState("");
  const [inputValue, setInputValue] = React.useState("");
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input
        value={inputValue}
        onChange={({ target: { value } }) => {
          setInputValue(value);
        }}
      />
      <button
        onClick={() => {
          setColor(inputValue);
        }}
      >
        Update Color
      </button>
    </div>
  );
}

【讨论】：